Please consider the following HTML :
<div class="mytest">
<ul>
<li>Parent 1</li>
<li>Parent 2
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
<li>Parent 3</li>
</ul>
</div>
I want to put a border around the "parent" li only, and I was convinced this CSS would do the trick :
.mytest > ul li {border : 1px solid #000;}
I read this selctor as : "select li which are children of a ul which is a direct children of a element with class mytest". But if I use that, the "child" li's also get the border. cfr this fiddle. Can someone explain why please ? I see no reason and I'm probably missing something important here cause I'm sure I already used this selector sucessfully for the same purpose before...
You must add direct child selector between <ul> and <li> like so:
.mytest > ul > li {border : 1px solid #000;}
With your code, you targeted all <li> in <ul> elements directly child of .mytest
Try
.mytest > ul > li {border : 1px solid #000;}
Try to add > before li like this Demo
.mytest > ul > li {border : 1px solid #000;}
Then only it will be considered as direct children of ul and the style will be applied only for that li. Hope this helps!
Your selector, as it currently stands, selects the lists that are immediate children of your parent div and all descendant items of that list.
To have it select only those list items that are direct descendants if the list, you must add another child selector, like so:
.mytest>ul>li
Direct child selector selects the immediate child that follows the parent so your code would go like this -
.mytest is the parent and its direct child is ul and ul direct children are li
.mytext > ul > li {border : 1px solid #000;}
is the correct format, also if you want to add only to the first direct child you could do like
.mytest > ul > li:first-child {border : 1px solid #000;}
Related
In my css file I have
.myclass > ul > li > a {
display:inline;
list-style-type:none;
}
both this style properties display and list-style-type are not working within "a" tag. However they are working if placed within "li" which does not serve the purpose because I want links which are aligned horizontally. Please advise what can be done.
<div class="myclass">
<ul>
<li>About Us </li>
<li>About Us </li>
<li>About Us </li>
</ul>
</div>
It looks like you're targeting the wrong elements here - essentially <a> has a list-style-type of none and is inline already anyway, so you're not seeing anything happen. list-style-type is something that will affect the <li> rather than the <a>:
.myclass > ul > li {
display: inline;
list-style-type: none;
}
To help make this a little clearer, you could also try adding a property that would have a visible impact on your <a> elements, like color:
.myclass > ul > li > a {
display:inline;
list-style-type:none;
color: hotpink;
}
Then you'll see that your selector was working - it just wasn't having any impact.
How can I style only the top level li's from this example list?
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
ul.upper > li {
color:red;
}
This styles all li's which I understand because the recursive UL is inside a first level list item. Is there a simple way to style only the top level li's though? Maybe using ":not" in some way?
Edit: I realize you can overwrite the style below it using color:initial or by adding another color(and other ways) but I was wondering if there was a way to ONLY select the top level li's nicely so another style isn't needed.
So, your li are inheriting color from their ancestors, so you need to add color:initial, or color:black to override that
ul.upper > li {
color: red;
}
li {
color: initial;
}
<ul class='upper'>
<li class="first">dog</li>
<li>cat</li>
<li>bird</li>
<li>mouse</li>
<li>
<ul class="lower">
<li>chow</li>
<li>nibz</li>
<li>seed</li>
<li>cheese</li>
</ul>
</li>
You want the child combinator, ">"
.upper > li
You can define the deeply nested UL's list-items like this:
ul > li {
color:red;
}
ul ul > li {
color: #000;
}
So this can work throughout your page to identify any top-level list-items versus second-level list-items, regardless of class name. "ul ul" in CSS means "ul that is inside another ul"
Working example: https://jsfiddle.net/2Lyvp2bm/2
(I'm new, how do I add a code snippet to my answer?)
I'm trying to apply a style to ONLY the very first child of an element. I'm using :first-child in the css to achieve this, but it looks like it's not the behaviour I'm looking for.
Take the following markup as example:
<ul class="myUl">
<ul class="mySubUl">
<li>foo0</li>
<li>foo1</li>
</ul>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
======================
<ul class="myUl">
<li>foo0</li>
<li>foo1</li>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
and this simple CSS:
ul.myUl li:first-child {
color: red;
}
Live fiddle: http://jsfiddle.net/bsSDh/1/
This applies not only to the first child of the ul.myUl elements, but also to the first child of ul.subUl. I would have expected this behaviour if the CSS selector was ul li:first-child (which works), but since I'm adding a class to the selector I'm expecting to apply that style only to the very first child.
Why does the style applies not only to the first child? Am I missing something about first-child specs or using the selector in the wrong way?
I think you need an additional child selector element like this:
ul.myUl > li:first-child {
color: red;
}
Example Fiddle
Your selector selects any <li> below ul.myUL, that is a first child. As this references only to the immediate parent and not any other ancestor, all those other <li> match as well.
EDIT
After your comment, I assume, that you will need a somehow complexer selector like this:
ul.myUl > li:first-child,
ul.myUl > ul:first-child > li:first-child {
color: red;
}
The selector
ul.myUl li:first-child
selects any li:first-child below any ul.myUl (i.e. first child of any parent inside the ul). Instead you might want to select a direct child via
ul.myUl > li:first-child
or even
ul.myUl > ul.subUl:first-child > li:first-child
Pay attention to the differences between the Child Combinator (a direct child) and the Descendant Combinator (any element contained).
You should use this two selectors to achieve the result wanted on the two known cases:
ul.myUl > ul:first-child > li:first-child {
color: red;
}
ul.myUl > li:first-child {
color: red;
}
Running Demo
I want to style the first list item of a UL, the list item is encased in an <a> tag.
I would have thought it would be simple, just this: http://jsfiddle.net/PHhFX/ but that isn't working.
Anyone any clue?
You're not supposed to encase a <li> in an <a> — in your HTML you can only have your <li> elements as children of the <ul>.
You probably meant to do it the other way around (<a> within <li>), then select
ul li:first-child
jsFiddle preview
It should work like this: http://jsfiddle.net/PHhFX/11/
CSS markup:
ul li:first-child {
border: 1px solid #000;
}
HTML markup:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
p.s.: you shouldn't wrap <li> elements with <a> elements. Remember, after a <ul> comes a <li>
Hope it helps!
Here you go, fixed your html and css:
Html:
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul>
And css:
ul li:first-child {
border: 1px solid #000;
}
Here is live example in jsFiddle
The HTML5 spec details that the li element may be contained by the following elements:
ol
ul
menu
You'll note that a is not among them.
Link tags are not valid children of lists (<ul> or <ol>) see: Is anything except LI's allowed in a UL?
You must have the links inside the list-items:
<li>AAA</li>
and so:
ul li:first-child a{
border: 1px solid #000;
}
see: http://jsfiddle.net/PHhFX/17/
Use ul a:first-child>li instead of ul a:first-child but this is a hack.
Border is not inherited property.
<ul>
<li> <span> apply </span> </li>
<li> <span> apply </span> </li>
<li>
<ul>
<li> <span> ignore </span> </li>
<li> <span> ignore </span> </li>
</ul>
</li>
</ul>
How can I apply a CSS rule only to span elements from the first level, and make span elements from the nested list ignore the rule?
Can this be done without specifically resetting the properties on the 2nd level spans?
Tried ul > li span but it doesn't seem to work, I get the styles applied to 2nd level too
Put your list in a wrapping div with an ID, for example <div id="ul-wrapper">, and try:
#ul-wrapper > ul > li > span {
/* my specific CSS */
}
#container > ul > li span { /* - Your CSS Here - */ }
Need to specify a container, so that only the first level ul may be selected.
As long as the parent of the outer ul isn't another li, you can use that as the starting point for your selector (example assuming it's a div):
div > ul > li span {
/* Whatever */
}
ul > li > span {border:solid 1px red;}
li > ul > li > span {border:none 1px red;};