CODEWITHSUNDEEP
htmlcss
Ayaz Ali Shah
Ayaz Ali Shah

Reputation: 3531

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

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.

Upvotes: 0

Views: 7941

Answers (5)

Shashank
Shashank

Reputation: 2060

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;
}

Upvotes: 0

Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

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>

Upvotes: 1

Andriy Ivaneyko
Andriy Ivaneyko

Reputation: 22031

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

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

Upvotes: 0

Quentin
Quentin

Reputation: 943568

Use a universal selector instead of a type selector.

.feature-section-heading > *

Upvotes: 2

Dirk Jan
Dirk Jan

Reputation: 2469

CSS

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

You can use the * as all element selector.

Upvotes: 2

Related Questions