Css target child class if one

Question

I got the following markup:

<div>
<p class="active"></p>
<p></p>
<p class="active"></p>
<p></p>
</div>

At some point, I get this markup:

<div>
<p></p>
<p></p>
<p class="active"></p>
<p></p>
</div>

Now I want to create an active class, but only if the div has only one active class. If there is more than one active class, then they must be of different styles. Sort of:

div .active{
color: red;
}

div .active:only-child{
color:green;
}

If there is a way to achieve this without js? CSS only?

Answer 1

Until the nth-matchcss selector is implemented in major browsers (give it a few years, hah), this is not possible with pure CSS, as far as I know.

Similar discussion in CSS3 selector: first type of type with class name?

Unfortunately!

Answer 2

, CSS, , , .

. - .has-active-items.

Answer 3

You cannot, but you can select and style the first "active" class:

View the demo.

CSS

.active{
    background: #f00;
    color: #fff;
}
.active + .active,
.active ~ p:not(.active) + .active{
    background: initial;
    color: initial;
}