CODEWITHSUNDEEP
csscss-selectors
Yamcha
Yamcha

Reputation: 1334

desendant child operator '>' not always working

Check this out:

<div class="Root">
<div>direct child 1</div>
<div>
    <div>indirect child 1</div>
    <div>indirect child 2</div>
</div>
<div>direct child 2</div>
</div>

.Root > div {
color:green;
}

http://jsfiddle.net/N5qFu/86/

It's not working properly. But If instead of color, I change the border, it works. Why?

Upvotes: 1

Views: 79

Answers (4)

PlantTheIdea
PlantTheIdea

Reputation: 16369

The default value of color is inherit. I updated your jsFiddle with the following code first:

div {color:black;}

Upvotes: 0

tckmn
tckmn

Reputation: 59323

<div class="Root">
    <div>direct child 1</div> <!-- this div is being colored -->

    <div>     <!-- this div is being colored! still a direct child-->
        <div>indirect child 1</div> <!-- color is being inherited -->
        <div>indirect child 2</div> <!-- color is being inherited -->
    </div>

    <div>direct child 2</div> <!-- this div is being colored -->
</div>

The wrapper div is still a direct child.

Upvotes: 0

Dai
Dai

Reputation: 155513

How is it "not working properly"? Remember that color: is an inherited property. If you want to exclude it then do this:

div div { color: black; }
.Root > div { color: green; }

Upvotes: 3

Explosion Pills
Explosion Pills

Reputation: 191789

Because the default color value is inherit.

http://jsfiddle.net/N5qFu/87/

Upvotes: 2

Related Questions