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

CssCss Selectors

Css Problem Overview


I have an element with class='myTestClass'. How do I apply a css style to all children of this elements? I only want to apply the style to the elements children. Not its grand children.

I could use

.myTestClass > div {
  margin: 0 20px;
}

which work for all div children, but I would like a solution which works for all children. I thought I could use *, but

.myTestClass > * {
  margin: 0 20px;
} 

does not work.

Edit

The .myTestClass > * selector does not apply the rule in firefox 26, and there is no other rule for margin according to firebug. And it works if I replace * with div.

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

Instead of the * selector you can use the :not(selector) with the > selector and set something that definitely wont be a child.

Edit: I thought it would be faster but it turns out I was wrong. Disregard.

Example:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMTilstedView Question on Stackoverflow
Solution 1 - CssAnonymousView Answer on Stackoverflow
Solution 2 - CssJPBView Answer on Stackoverflow