'CSS Child Combinators

I guess I am not getting css child combinators.

I am trying to target just the first level on the li's with the following:

ul > li { color: green; }

                <ul>
                    <li>Home</li>
                    <li>
                        Products
                        <ul>
                            <li>Product 1 </li>
                            <li>Product 2</li>
                            <li>Product 3</li>
                        </ul>
                    </li>
                    <li>Contact</li>
                    <li>News</li>
                </ul>

http://jsfiddle.net/5vB3h/

NOTE: I also tried removing the spaces between >, with no luck.

htmlcss


Solution 1:[1]

You're using them fine, but all (properly marked-up) <li>s are children of <ul>s. You can specify the parent (in your jsFiddle, body):

body > ul > li

Or reverse the styles with the more specific case:

li ul > li {
    color: black;
}

In the case of color, you need to use the second option anyways, because color is inherited. Here's the updated jsFiddle.

Solution 2:[2]

Your rule targets the child list items of any list. What you can do is create a second rule to recolor the other sub list items. For example:

ul > li {
    color: green;
}
li li {
    color:black
}

jsFiddle example

Solution 3:[3]

ul will match all the <ul> elements. Since every <li> is a child of one of the <ul>s…

You need to be more specific about which <ul> you mean. Perhaps add a class to it.

Solution 4:[4]

ul > li will select all the li elements in your document because they are all the children of ul elements.

If you apply a class to the parent like <ul class="top">, then you can use ul.top > li.

Solution 5:[5]

Add a class

li {color: blue;}
/* ^ added because maybe initial property is color: inherit;
     If not, someone correct me */
ul.a > li { color: red; }

After this, add class to ul like <ul class="a" ...

http://jsfiddle.net/5vB3h/7/

Solution 6:[6]

EDIT (worked it out):

Okay so I ballsed up. Below is wrong.

ul:first-child > li { color: green; }

I found that when applying:

div>ul>li{color:green}

all lis went green... turns out that the li magically inherit the color of the li (odd behaviour as I assume the content had color:#000)

anyway... You need to explicitly set the color: to soemthing other than green to see the style working.

fiddle here

//html

<div>
    <ul>
  <li>Home</li>
  <li>
    Products
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
        <li>Product 3</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>News</li>
  </ul>
</div>

//css

li {color:black} //you have to have this (or something like * {color:black} OR body/html {color:black} as li seem to automatically inherit parent li color property
div>ul>li{ color: green; } //have to have parent.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ry-
Solution 2 Hemerson Varela
Solution 3 Quentin
Solution 4 recursive
Solution 5 Sourabh
Solution 6

Related Questions