How can select all child elements by class or id using css?

Question

I want to add specific style property on all child elements of this .feature-section-heading class. I know i can do that using below trick

.feature-section-heading > h1 {...}

But above logic will implement on just h1 tag. So is there possible that i can add style property on all child elements? I searched about that and find accepted answer, but it does not work.

`.feature-section-heading > * {...}` would apply the style to all immediate children (but there may be a better way to achieve what you are trying to do). The universal selector, `*` is not considered efficient css. What is it that you are trying to apply? — ne1410s, Feb 01 '16 at 12:49
this was asked previously http://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-elements — lacexd, Feb 01 '16 at 15:22

score 2 · Answer 1 · answered Feb 01 '16 at 12:49

2

CSS

.feature-section-heading > * {...}

You can use the * as all element selector.

answered Feb 01 '16 at 12:49

Dirk Jan

2,355
3
20
38

score 2 · Accepted Answer · answered Feb 01 '16 at 12:49

2

Use a universal selector instead of a type selector.

.feature-section-heading > *

answered Feb 01 '16 at 12:49

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered Feb 01 '16 at 12:55

1

You Can use * (Asterik Selector)

Here is the Demo

CSS

.foo *{background:red}

HTML

<div class="foo">

<span>1</span>
<p>2</p>
<div>3</div>

</div>

answered Feb 01 '16 at 12:55

Dinesh Kanivu

2,551
1
23
55

Andriy Ivaneyko · Answer 4 · 2016-02-01T12:50:08.557

0

Access All childrens with Css * selector as in code snippet below:

.feature-section-heading > * {
    background: red;
}

edited Feb 01 '16 at 12:50

answered Feb 01 '16 at 12:48

Andriy Ivaneyko

20,639
6
60
82

That matches all descendants, not just children. – Quentin Feb 01 '16 at 12:49

score 0 · Answer 5 · answered Feb 01 '16 at 13:14

Please find the jsfiddle link that illustrates the desired behavior.

HTML

<div class="feature-section-heading">
    I am parent div
    <br />
    <h1>
        Heading
    </h1>
    <div>
        Child DIV
    </div>
    <div>
        Child DIV
    </div>
    <p>
        Child paragraph
    </p>
    <p>
        Child paragraph
    </p>
    <p>
        Child paragraph
    </p>
    <span>
        Child span
    </span>
</div>

CSS

.feature-section-heading {
  color: red;
}
.feature-section-heading > :not(:empty){
    color: darkgreen;
}

How can select all child elements by class or id using css?

5 Answers5