0

I want to apply some CSS on second active class. Only two element can have active class at a time.

I have tried the following CSS selectors:

 .p .active:last-of-type
 .p .active:nth-of-type(2)

But neither of them are working. Please tell me what I'm doing wrong.

Here is my code:

.p .active:nth-of-type(2){
   background: red;
}
<div class="p">
  <div class="a">The first paragraph.</div>
  <div class="a active">The second paragraph.</div>
  <div class="a active">The third paragraph.</div>
  <div class="a">The fourth paragraph.</div>
</div>
Sanjay Goswami
  • 822
  • 1
  • 16
  • 36
  • 2
    `type` in CSS property name means tag. So `:nth-of-type(2)` looks for the second `div` and check if has `class=b`. – pavel Mar 22 '18 at 13:20
  • One day we might have this https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo which would look like `.p *:nth-child(2 of .b) {background: yellow}` but not yet. – Andrew Bone Mar 22 '18 at 13:32
  • Vote for Reopen the question because in _duplicate_ topis there is anothor code and the answer there isn't valid for this topic. – pavel Mar 22 '18 at 13:45
  • @panther There is also https://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class which is closed as a duplicate of the target question here. – TylerH Mar 22 '18 at 14:02
  • @TylerH: from accepted answer: '_You will probably have to add a new class to every third .module manually._'... eh? :-) I think it's possible without adding new classes. Any else _solutions_? – pavel Mar 22 '18 at 14:06
  • @panther Feel free to go to the target question of https://stackoverflow.com/questions/5545649/can-i-combine-nth-child-or-nth-of-type-with-an-arbitrary-selector and add that solution if it does not exist already. – TylerH Mar 22 '18 at 14:08
  • @TylerH: ok, so be please so kind and show me the code for this answer which is meant in your _duplicate_ topic. Good luck friend. Try it without JavaScript (isn't needed, isn't in tags, ...) and color me the second `.b` element from this question (not always the third `.a` or third `div`). – pavel Mar 22 '18 at 14:11
  • @panther I'm confused... you are saying this question about how to do something with CSS isn't a duplicate because you... can't do it without JavaScript? – TylerH Mar 22 '18 at 14:15

1 Answers1

3

The CSS hasn't native tools how to do that. A little hackish code could be

.p .b ~ .b {background: red;} /* set properties to 2nd, 3rd, 4th, ... .b elements */
.p .b ~ .b ~ .b {background: none;}  /* reset properties to 3rd, 4th, ... .b elements */
<div class="p">
    <div class="a">The first paragraph.</div>
    <div class="a b">The second paragraph.</div>
    <div class="a b">The third paragraph.</div>
    <div class="a">The fourth paragraph.</div>
</div>

<br>

<div class="p">
    <div class="a">The first paragraph.</div>
    <div class="a b">The second paragraph.</div>
    <div class="a b">The third paragraph.</div>
    <div class="a b">The fourth paragraph.</div>
    <div class="a">The fifth paragraph.</div>
</div>
pavel
  • 26,538
  • 10
  • 45
  • 61
  • Can you explain your code? – Sanjay Goswami Mar 22 '18 at 13:36
  • 1
    @PlanetHackers: I've added a comments into CSS. The first CSS line set `background: red` to `2, 3, 4, ...xth .b` elements. The second line just reset these rules to default (the same as the first .b has). – pavel Mar 22 '18 at 13:39
  • Of course, this falls over if you have `.a {background: #aaa}` and expect all future instances of .b to still pick that up. But there's not much you can do about that. – Andrew Bone Mar 22 '18 at 13:45
  • 1
    @PlanetHackers: for better understanding I've create you another fiddle... maybe helps you. https://jsfiddle.net/8pdpfkke/ – pavel Mar 22 '18 at 13:46
  • @AndrewBone: sure, when `.a` has different styles from `.b` the question would be changed and solution is possible, but not exactly this way (but the principle stays the same). You can find second `.b` and if there is `.a` too, set another color. Or find second single `.b`... Everything is possible :-) – pavel Mar 22 '18 at 13:48