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

Question

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.

How does it 'not work'? Bear in mind that descendants of those child elements will (likely) inherit most of the styles assigned to those child elements. — David Thomas, Oct 13 '14 at 22:37
Debug this with the inspector and see if there is a rule taking it over — Brewal, Oct 13 '14 at 22:42

score 254 · Accepted Answer · edited Sep 21 '17 at 00:59

254

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>

edited Sep 21 '17 at 00:59

Marc Barbeau

826
10
21

answered Oct 14 '14 at 06:19

Anonymous

10,002
3
23
39

8

Never use a universal selector. It has a big performance impact on rendering. – yesIcan Apr 23 '16 at 01:08
8

@yesIcan: Ok that is good to know....do you have an alternate solution that doesn't use the universal selector? – Matthew Nichols May 17 '16 at 19:07
15

The performance of the universal selector isn't that bad on modern browsers. [Here's a reference](http://www.telerik.com/blogs/css-tip-star-selector-not-that-bad). My own experience at work corroborates this author's conclusion. – Nathan Apr 05 '17 at 02:29
4

Use universal selectors whenever you want, and if the performance is acceptable for your situation, then there's no need to find an alternative. – Jason C Jun 04 '21 at 22:18

JPB · Answer 2 · 2019-05-11T00:12:24.427

-2

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>

edited May 11 '19 at 00:12

answered Oct 22 '18 at 11:47

JPB

592
2
6
28

6

What's the advantage of doing this? – W Biggs Oct 25 '18 at 18:07
6

@WilsonBiggs - it appears to be a misguided attempt to "not use a universal selector". But its obviously a bad idea, as it is "near-universal", yet requires an additional test - So it has to do all the work that a universal selector would, and then do additional work. – ToolmakerSteve Mar 14 '19 at 18:00
:not(selector) only works on safari and it doesn't seems it will work on chrome / firefox – gtamborero Apr 28 '20 at 20:00

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

2 Answers2

Linked

Related