CSS Selector - How to select child element of an active parent?

Question

I have this html code

<div class="parent active">
  <div class="child_1"></div class="child_1">
  <div class="child_2"> some_text </div class="child_2">
</div>

How to select the div element of class child_2 when the parent is active using CSS selector?

I can select active parent using this:

.parent:active

I tried this but failed:

.parent:active > .child_2

May be you should go throw some basic `html AND css` article, which will help you to under the basic html tag, css rule and how they works. From above code I can see class is applied on closing tag `` also which is not required at all. — Deepak Sharma, Sep 13 '19 at 10:02
i think it's not a basic selection of multple elements. And I didnt raise this question because I havent look through stack overflow. Looking at the link you posted above, I still cannot get the answer to my question. @Pete. I wonder how to select child element when a parent is active, not just selecting child element or selecting multiple element. — addicted, Sep 13 '19 at 21:15
@DeepakSharma I read basic html and css article already. I didn't go here immediately. You can see above I tried some methods based on my understanding and it didn't work. And you're talking about closing tag which is not required. To me, this seems optional to do and it's related to the cleanliness fo the code. It's not the subject of my question. — addicted, Sep 13 '19 at 21:18

score 2 · Answer 1 · answered Sep 13 '19 at 09:56

2

.parent.active .child_2{
/*your style here*/
}

In your case, active is a class, so you should use class selector.

answered Sep 13 '19 at 09:56

adam

21
2
2

let me try this first – addicted Sep 13 '19 at 09:56

score 1 · Answer 2 · answered Sep 13 '19 at 09:55

1

If you want to select a ele with class child_2 only under div having class parent and active then

.parent.active .child_2 {

}

answered Sep 13 '19 at 09:55

Yash Pokar

4,939
1
12
25

let me try this first – addicted Sep 13 '19 at 09:56

score 1 · Answer 3 · answered Sep 13 '19 at 09:57

Your selector is working correctly, as the active pseudo class, is up when you are clicking on that element, you can check it here, the child_2 element will turn red when you click it's container:

.parent:active > .child_2{
  color: red;
}

  <div class="parent active">
    <div class="child_1">1</div class="child_1">
    <div class="child_2">2</div class="child_2">
  </div>

Now, what I think you are looking for, is the to select the child, when the parent has the class .active. And that is a completely different selector.

That is something like this: .parent.active > .child_2, as you can see the following example:

.parent.active > .child_2{
  color: red;
}

  <div class="parent active">
    <div class="child_1">1</div class="child_1">
    <div class="child_2">2</div class="child_2">
  </div>

thanks. I didn't know that active element can be selected this way since all reference that I look at shows it is selected by using `parents:active` — addicted, Sep 13 '19 at 21:16

score 0 · Answer 4 · answered Sep 13 '19 at 09:59

0

Try this.

.active .child_2 {
  color: red;
}

<div class="parent active">
  <div class="child_1"></div class="child_1">
  <div class="child_2"> some_text </div>
</div>

answered Sep 13 '19 at 09:59

Sumit Patel

4,530
1
10
28

CSS Selector - How to select child element of an active parent?

4 Answers4