How to Apply a CSS Rule to All Descendants of an Elements

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

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

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

How do I apply a style to all children of an element

As commented by David Thomas, descendants of those child elements will (likely) inherit most of the styles assigned to those child elements.

You need to wrap your .myTestClass inside an element and apply the styles to descendants by adding .wrapper * descendant selector. Then, add .myTestClass > * child selector to apply the style to the elements children, not its grand children. For example like this:

JSFiddle - DEMO

.wrapper * {    color: blue;    margin: 0 100px; /* Only for demo */}.myTestClass > * {    color:red;    margin: 0 20px;}

<div class="wrapper">    <div class="myTestClass">Text 0        <div>Text 1</div>        <span>Text 1</span>        <div>Text 1            <p>Text 2</p>            <div>Text 2</div>        </div>        <p>Text 1</p>    </div>    <div>Text 0</div></div>

Selector for all a tag descendants

For all descendants, use:

#tab-banner *

For direct descendants, use:

#tab-banner > *

Edit:

As the op changed/clarified the question:

To find all descendants of a specific type, just use that type instead of *. Example:

#tab-banner a

So, what you are trying is correct. If the style doesn't apply to the elements that you expect, then those elements are actually not descendants of that section, or you have another rule that takes prescedence.

Make all rules in a CSS file apply only to descendants of id

I use Less, a CSS pre-processor to help with such things. I also use an a piece of software called Crunch. It can, however, be downloaded from here.

To give you an idea how it works, let's take your example.

Under less (and before compiling)

#thisOne {
    p {
        color:red;
    }
}

You can then add to the rule as you need. ie:

#thisOne {
    width:300px;
    margin-left:50px;
    h1 {
        font-weight:lighter;
        color:blue;
    }
    p {
        color:red;
    }
}

You can do a lot more than this. Check it out. I've become a convert.

Apply CSS to any element except for certain class descendants?

You will not be able to exclude descendants this way without writing a separate selector. You won't be able to do this even using :not(), for the reasons stated here.

Fortunately, the fact that .light elements will only ever occur within the context of a .dark element and not vice versa makes this a little easier. Since you have a body CSS rule already, just add .light p to that rule, and move the entire ruleset underneath .dark p so .light p will take precedence:

.dark p {
    color: #000;
}

body, .light p {
    color: #ccc;
}

Updated fiddle

Alternatively if you want to keep the body rule on top, you could bump up the specificity of .light p to ensure it will take precedence:

body, body .light p {
    color: #ccc;
}

.dark p {
    color: #000;
}

CSS: select an element and all its descendant elements

With XPath you have the descendant-or-self axis

But there is no such selector in CSS.

Select all child elements recursively in CSS

Use a white space to match all descendants of an element:

div.dropdown * {
    color: red;
}

x y matches every element y that is inside x, however deeply nested it may be - children, grandchildren and so on.

The asterisk * matches any element.

Official Specification: CSS 2.1: Chapter 5.5: Descendant Selectors

---

Related Topics