I have a nested list and I'm having trouble styling the last level UL.
<ul class="same-class">
<li>
<ul class="same-class">
<li>
</li>
</ul>
</li>
</ul>
What I need is to display the first UL items inline, and below them show their children as blocks. The problem is both UL have the same class (I can't change the HTML output, nor add classes), and I can't find the proper selector to target the second UL.
In the example here I tried adding a diferent class to menu 3 and 4, and that does the trick, but since changing class isn't an option I need to find a workaround to make the children display as blocks.
Can someone take a look and advise?
ul ul li { display: block; } or .same-class .same-class li { display: block; } should do the trick - that'll select all li that are a child of two or more ul or .same-class
This might be useful (attribute selectors) depending on what your real code looks like (most likely useful if you're using AngularJS or something similar) or the nth-child might be good too because I'm not 100% sure what you mean.
Hope this helps!
If you try plugging this in, you should be able to target the various components as you like.
The first selector is targeting all list items that are direct children of the first menu.
The second one is targeting any lists inside of a list item which itself is a direct decendant of the menu class.
The third one is targeting just your list items in your nested lists. It gives a good degree of control for adjusting the layout.
ul.menu:first-of-type > li{
display:inline-block;
}
.menu > li ul {
display:block;
}
.menu:first-of-type > li > ul > li {
display:block;
}
If you was to use CSS parent selectors then try;
ul.same-class li {
display: inline-block;
}
li > ul.same-class li {
display: block;
}
The > in the second rule will select all ul.same-class li elements where it has a li as a parent.
Related
I am trying to apply my CSS file to 2 of my lists
<ul class="list1">
<li>Cat</li>
<li>kittens</li>
</ul>
<ul class="list2">
<li>Pizza</li>
<li>Popcorn</li>
</ul>
I want only one of them to be inline so I'm trying
ul.list1 {
display: inline;
}
but the inline won't work unless I do
li {
display: inline;
}
which applies to all my lists. How do I make it son only inline affects one list?
I'm guessing you want one of the lists to be horizontal, like so:
.list1 li { display: inline; }
Look up how to use descendant selectors, it is one of the basic powers of CSS.
Increase the specificity of your selector. For example...
ul.list1 li { display: inline; }
For further complexity as an example... If you have both of these lists appearing twice in your site, once inside a div with the ID #content, and once inside a footer widget with ID #widget. Then you can target the list inside #content by typing.
#content ul.list1 li { display: inline; }
Here is a link to an article to the W3C Wiki on CSS3 Selectors
The above link will give you everything you need to know concerning combinators, pseudo-selectors and pseduo-elements. Learn this and you can conquer the internet.
Use
.list1 li {display:inline;}
The following code will make all of your listings inline, as I can understand, this is not your intention.
li {
display: inline;
}
Instead, you should specify that you only want one of the lists elements to have this style. You should therefor use the following code.
.list1 li {
display: inline;
}
This will make all list entries within the list1 class inline.
I have a simple menu styled with css.
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
</ul>
Is it possible to apply specific style to li element, containing a with active class.
I've tryed something like this:
#container > ul > li a.active < li {
custom: style;
}
Not possible with CSS. Though this can be achieved with scripting.
Similar question here.
Apply CSS styles to an element depending on its child elements
No, selectors can't match in reverse. In such circumstances the best approach is to simplify the matter.
A elements can be styled as block level elements, so simply push down whatever styles you had on the parent LI to the A elements. You already have your specific selector a.active, that should be distinct enough that you can style them appropriately.
#container ul li a.active{ yourstyle:styleproperties;}
or I think you may want to do like this
#container ul li a:active{ yourstyle:styleproperties;}
if you want dynamically add class to element you can use javascript and jquery
http://api.jquery.com/addClass/
$("#container ul li a").addClass("active");
and for parent(this class will be added for li element which is parent to a.active element)
$('#container ul li a.active').parent().addClass("active");
there is already similar topic Target outer div based on class of inner a
Try this:
ul li a.active{ color:green;}
http://jsfiddle.net/Vloxxity/VZgQx/
Edit:
i've read your comment,
this is only possible if you mark the li with a active class.
I've been reading about this everywhere, and from what I've read to select a list without selecting the nested list. I need to have this
.myclass > ul > li
//or even just
ul > li
I've been trying to get it to work unsuccessfully. The selector is selecting everything, including the nested list. What am I missing?
Please see the code on JS Bin:
http://jsbin.com/asipap/4/edit
some CSS styles are inherited from parent elements unless another style explicitly overrides it, you've set the color for all the list items, but haven't overridden it for any other matched selector. Simply adding li { color: black } should solve the issue.
You need to select the ul that are inside an ul?
.cats, .cats ul{list-style-type:none;}
.test li ul > li{color:red;} /* li ul: an ul inside a li */
This select all nested list, maybe you want to use > to limit the deep.
See it here http://jsbin.com/asipap/16/
This li element matches the .test > ul > li selector. Therefore, all text inside that li will be red, including the ul inside the li.
<li>Test 1.1
<ul>
<li>nested</li>
</ul>
</li>
Currently i have a css snippet as follows:
ul.grid, ul.grid > li {
margin: 0;
padding: 0;
list-style-type: none;
}
can someone explain to me what is meant by
ul.grid, ul.grid > li ?
Correct me if i am wrong, ul.grid says that grid is a class? Can i some how use id instead of class?
ul.grid means a ul element with class grid.
ul.grid > li means an li element which is a direct child (and not a further descendant) of a ul element with class grid.
The comma separating the two means that the following rules will be applied to elements matching both selectors, so in other words, they will be applied to the ul and all of its children li elements.
Can i some how use id instead of class?
Yes. Replace the . with a # and make sure the elements have an id:
ul#grid, ul#grid > li { ... }
That would apply to, for example:
<ul id="grid">
<li></li>
</ul>
To use ID instead of class, replace the . with a # and use the ul ID:
ul#ulID, ul#ulID > li
ul.grid means any ul tag which also has a class of grid.
ul.grid > li represents any li tag which is a child of a ul tag which has a class of grid.
i have list like that:
<ul>
<li><a...>...</a></li>
<li>...</li>
</ul>
where both type of listelements are there multiple times in arbitrary order.
Is there a way to format those li's differently? (different list-style-image) The only difference is that the one kind contains a link and the other one doesnt.
No, there is no way in CSS to specify a selector depending on the child elements.
You would have to add something to distinguish the li elements themselves, like a class on all li elements that contains links.
If you can use jQUery, you could add the class to the li elements that contains anchor tags:
$('li:has(a)').addClass('linkItem');
A non-jQuery solution could look like this:
var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
if (items[i].getElementsByTagName('A').length > 0) {
items[i].className = 'linkItem';
}
}
sure. If you give each different li a class you can do it simple. Or you can always do this if you can't use classes.
ul li
{
styles....
}
ul li a
{
styles....
}
The styles in the first class will apply to all li elements and styles in the second class will apply to the < a > tags respectively.
You can't do this with CSS alone, you could use Javascript to accomplish this. Here's an example using jQuery:
$('ul li a').each(function() {
$(this).parent().css('list-style-image', 'url("/path/image.gif")');
});
This will set the style for the li tags, not the a tags. Technically, the list-style-image property is supposed to be set for ul tags, not li, but most (all?) browsers handle it the way you would expect when you style the li tags individually.
Hello there
I would add a <p></p> tag like this:
<ul>
<li><a...>...</a></li>
<li><p></p></li>
</ul>
And then apply 2 different styles like this:
ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}
I would not recommend using javascript for this, some people block javascript ect. but it depends. I would perfer css/html.
Edit:
For some reason you can write <p></p> without making it code - Fixed
Also I might have overlooked that you wanted to apply list-style-image, then this will not work.
This is what classes are for. In HTML:
<ul>
<li class="linked"><a...>...</a></li>
<li>...</li>
</ul>
and in CSS
ul li {...}
ul li.linked {...}