CSS Child Combinators

Question

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.

I have solved. see answer with most downvotes for working fiddle ;) — Paul Sullivan
– Paul Sullivan, Commented May 30, 2013 at 20:44

Ry- · Accepted Answer · 2013-05-30 20:33:06Z

2

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.

answered May 30, 2013 at 20:33

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gutierrezalex Over a year ago

Please provide a jsFiddle link

gutierrezalex Over a year ago

I am trying to over-ride, adding more css. I can just use simple css - ie. li {} li li {}

Ry- Over a year ago

@gutierrezalex: Go ahead; see my other comment.

Hemerson Varela · Accepted Answer · 2013-05-30 20:42:11Z

1

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

edited May 30, 2013 at 20:42

Hemerson Varela

26.1k18 gold badges73 silver badges69 bronze badges

answered May 30, 2013 at 20:34

j08691

208k33 gold badges269 silver badges281 bronze badges

7 Comments

gutierrezalex Over a year ago

This is exactly what I am trying to avoid.

j08691 Over a year ago

Why are you trying to avoid that?

Ry- Over a year ago

@gutierrezalex: That's the only way to do it, though.

gutierrezalex Over a year ago

What is the point of using CSS Child Combinators, then? I can just use ul li, then over ride with li li. Makes sense?

j08691 Over a year ago

There are plenty of reason to use various CSS combinators, however in your specific case, this is one simply way to solve your issue.

|

Quentin · Accepted Answer · 2013-05-30 20:32:17Z

0

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.

answered May 30, 2013 at 20:32

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Phylogenesis Over a year ago

Or use a child selector on the parent of the <ul> too, such as div > ul > li { color: green; }.

recursive · Accepted Answer · 2013-05-30 20:33:14Z

0

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.

answered May 30, 2013 at 20:33

recursive

86.5k36 gold badges155 silver badges246 bronze badges

1 Comment

Paul Sullivan Over a year ago

and yours work does it recursive... see a fiddle of your NOT working solution jsfiddle.net/5vB3h/8

Sourabh · Accepted Answer · 2013-05-30 20:52:20Z

0

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/

answered May 30, 2013 at 20:52

Sourabh

8,52210 gold badges59 silver badges99 bronze badges

1 Comment

gutierrezalex Over a year ago

I am trying to NOT over ride with css. For that, I can just jsfiddle.net/5vB3h/6

Paul Sullivan · Accepted Answer · 2013-05-30 20:50:58Z

-2

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.

edited May 30, 2013 at 20:50

answered May 30, 2013 at 20:32

Paul Sullivan

2,8752 gold badges21 silver badges25 bronze badges

13 Comments

Paul Sullivan Over a year ago

Do you want me to do a 'dummy' guide?

recursive Over a year ago

@Paul: That won't be necessary, but I think people would be happy with a correct answer.

Paul Sullivan Over a year ago

@recursive there you go - correct answer, odd behaviour (perhaps within jsfiddle maybe not to do with inherited color attribute that needs to be explicitly declared)

Paul Sullivan Over a year ago

thanks for creating the fiddle minitech - see updated fiddle ;) jsfiddle.net/5vB3h/5

gutierrezalex Over a year ago

I am trying to NOT over ride, adding more CSS. For that, I can just use li {} li li {}

|

Collectives™ on Stack Overflow

CSS Child Combinators

6 Answers 6

3 Comments

7 Comments

1 Comment

1 Comment

Add a class

1 Comment

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

7 Comments

1 Comment

1 Comment

Add a class

1 Comment

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related