Regaining the power of advanced CSS selectors

[AndyOGo]

I have a case where I want to style all the adjacent sibling of a tag, except the first one for every adjacent group.

<div>
  <p><!-- don't style this one --></p> 
  <p></p>
  <p></p>

  <div><!-- interrupt the siblings chain --></div>

  <p><!-- don't style this one --></p>
  <p></p>
  <p></p>
</div>

With pure CSS the adjacent siblings selector + or :last-of-type, :first-of-type can be utilised to facilitate this use case, like:

p {
  color: green;
}

p + p {
  color: red;
}

// or

p:not(:first-of-type, :first-of-type:last-of-type) {
 color: red;
}

I know that a plugin for these can be added.

I have seen such needs fairly often and would favour an official plugin for such advanced selections.

[MathGeniusJodie]

https://tailwindcss.com/docs/configuring-variants
tailwind has a "first" variant by default that does exactly what you want but in reverse

[AndyOGo]

@MathGeniusJodie thank you for your answer.

Though I fear there is a miss-understanding, this is not about :first-child or :last-child CSS pseudo classes.

Targets the first-child pseudo-class.
https://tailwindcss.com/docs/configuring-variants

It is about adjacent siblings.