css target child class if single

Question

I got following markup:

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

At one point I get this markup:

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

Now I want to style the active class, but only if there is only one active class within the div. If there are more than one active class their should be different styling. Something like:

div .active{
color: red;
}

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

If there a way achieving this without js? Only CSS?

[CSS-Tricks | :only-child](https://css-tricks.com/almanac/selectors/o/only-child/) — emerson.marini, Sep 23 '15 at 14:16
thats what i thought, but only-child is only targeting the element not class, am i wrong? http://jsfiddle.net/vnd0pygm/ — Jonny Vince, Sep 23 '15 at 14:17
That cannot account for the class="active" part of his question unfortunately. — CollinD, Sep 23 '15 at 14:17
Your best shot will be to use a child combinator like `.active ~ .active` to style 2.+ elements with the class `.active`. — Nico O, Sep 23 '15 at 14:19
@JonnyVince Yes, `:only-child` and similar selectors are only considering the elements, not their attributes. — feeela, Sep 23 '15 at 14:20
http://jsfiddle.net/vnd0pygm/1/ .active ~ .active approach looks good! What about the first child? — Jonny Vince, Sep 23 '15 at 14:24
@JonnyVince The `.active` element that is not within `.active ~ .active` is the first-child. You can style `.active` for your first child and override relevant properties within the combinator. Not the best, but should do the trick. Good luck. — Nico O, Sep 23 '15 at 14:26
Guys I am trying this: `p.active::not(p.active~p.active)` .. but it doesn't work :( — Imran Bughio, Sep 23 '15 at 14:29
@ImranBughio this can not work. `:not()` [only accepts simple selectors.](http://www.w3.org/TR/css3-selectors/#simple-selectors-dfn) — Nico O, Sep 23 '15 at 14:35
@NicoO Have you memorized css specs or did you just looked at it right now.. just curious! — Imran Bughio, Sep 23 '15 at 14:41
@ImranBughio I knew that `:not()` is *not* accepting combinators, but I looked up the correct term ;) Have a great day. — Nico O, Sep 23 '15 at 14:51

score 2 · Answer 1 · answered Sep 23 '15 at 14:18

No, you can't achieve that in plain CSS since you can't access a parent element from a specific selector, nor can you style an element based on whether it has a child with specific class name.

You can add a helper class name to the parent element. Something like .has-active-items.

score 1 · Answer 2 · edited May 23 '17 at 12:14

1

Until the nth-match css 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 over at CSS3 selector :first-of-type with class name?

Sorry!

edited May 23 '17 at 12:14

Community

1
1

answered Sep 23 '15 at 14:18

CollinD

7,304
2
22
45

score 0 · Answer 3 · answered Sep 23 '15 at 15:20

0

You can't but you can select & style the first occurring "active" class:

View demo.

CSS:

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

answered Sep 23 '15 at 15:20

Imran Bughio

4,811
2
30
53

css target child class if single

3 Answers3

Linked