CODEWITHSUNDEEP
htmlcss
gutierrezalex
gutierrezalex

Reputation: 828

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.

Upvotes: 0

Views: 118

Answers (6)

Sourabh
Sourabh

Reputation: 8482

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/

Upvotes: 0

Paul Sullivan
Paul Sullivan

Reputation: 2875

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.

Upvotes: -2

j08691
j08691

Reputation: 207901

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

Upvotes: 1

recursive
recursive

Reputation: 86084

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.

Upvotes: 0

Ry-
Ry-

Reputation: 224903

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.

Upvotes: 2

Quentin
Quentin

Reputation: 943556

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.

Upvotes: 0

Related Questions