CSS3 selector :first-of-type with class name?

Question

Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven\'t been successful with my test so I\'m thin

Answer 1

This it not possible to use the CSS3 selector :first-of-type to select the first element with a given class name.

However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-class and the adjacent sibling selectors to match an element that doesn't immediately have a previous element with the same class name :

:not(.myclass1) + .myclass1

Full working code example:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

  
This text should appear as normal
  
This text should be blue.
  
This text should appear red.
  
This text should appear green.