CODEWITHSUNDEEP
csscss-selectors
clarkk
clarkk

Reputation: 1

How can I apply a css rule to all descendants of an elements

How can you redefine a class if its in another specific class?

div.cls {
color:blue;
}

div.tst > div.cls {
color:red;
}

<div class="cls">test</div> // text color = blue

<div class="tst">
  <div class="cls">test</div> // text color = red
  <div>
    <div class="cls">test</div> // text color = blue
  </div>
<div>

How to make the last one also red?

jsfiddle

http://jsfiddle.net/gpD7H/

Upvotes: 45

Views: 51875

Answers (3)

TomoMiha
TomoMiha

Reputation: 1279

I used this, it work for me:

.name-of-parent * { color: red; }

Upvotes: 48

animuson
animuson

Reputation: 54797

Exactly like that. However, your second division won't be red text because it's also contained within another division. The > selector only matches to the immediate children under the element matched before it, so it's looking inside div.tst at only one level. Try removing the > from the selector:

div.tst div.cls {
color:red;
}

Your updated jsFiddle

Upvotes: 6

Felix Kling
Felix Kling

Reputation: 817208

Use the descendant selector [W3C]: div.tst div.cls

> is the child selector [W3C] and will only match children of an element.

Upvotes: 29

Related Questions