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 thinking it s not   The Code  http   jsfiddle net YWY4L      x000D   x000D  p first-of-type  color blue  x000D  p myclass1 first-of-type  color red  x000D   myclass2 first-of-type  color green  x000D   lt div gt  x000D     lt div gt This text should appear as normal lt  div gt  x000D     lt p gt This text should be blue  lt  p gt  x000D     lt p class  myclass1  gt This text should appear red  lt  p gt  x000D     lt p class  myclass2  gt This text should appear green  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The draft CSS Selectors Level 4 proposes to add an of <other-selector> grammar within the :nth-child selector. This would allow you to pick out the nth child matching a given other selector:

:nth-child(1 of p.myclass)

Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:

:nth-match(1 of p.myclass)

This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.

User · Answer

This is an old thread  but I m responding because it still appears high in the list of search results  Now that the future has arrived  you can use the  nth-child pseudo-selector   p nth-child 1    color  blue    p myclass1 nth-child 1    color  red    p myclass2 nth-child 1    color  green      The  nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers   More here  https   developer mozilla org en-US docs Web CSS  nth-child

User · Answer

Simply  first works for me  why isn t this mentioned yet

User · Answer

Not sure how to explain this but I ran into something similar today   Not being able to set  user first-of-type   while  user last-of-type   worked fine  This was fixed after I wrapped them inside a div without any class or styling   https   codepen io adrianTNT pen WgEpbE    lt style gt   user    display block    background-color  FFCC00      user first-of-type    background-color  FF0000     lt  style gt    lt p gt Not working while this P additional tag exists lt  p gt    lt p class  user  gt A lt  p gt   lt p class  user  gt B lt  p gt   lt p class  user  gt C lt  p gt    lt p gt Working while inside a div  lt  p gt    lt div gt   lt p class  user  gt A lt  p gt   lt p class  user  gt B lt  p gt   lt p class  user  gt C lt  p gt   lt  div gt

User · Answer

You can do this by selecting every element of the class that is the sibling of the same class and inverting it  which will select pretty much every element on the page  so then you have to select by the class again    eg    lt style gt       not  bar    bar  bar           color  red         lt div gt       lt div class  foo  gt  lt  div gt       lt div class  bar  gt  lt  div gt   lt  -- Only this will be selected -- gt       lt div class  foo  gt  lt  div gt       lt div class  bar  gt  lt  div gt       lt div class  foo  gt  lt  div gt       lt div class  bar  gt  lt  div gt   lt  div gt

User · Answer

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    x000D   x000D  p first-of-type  color blue  x000D  p not  myclass1     myclass1   color  red   x000D  p not  myclass2     myclass2   color  green   x000D   lt div gt  x000D     lt div gt This text should appear as normal lt  div gt  x000D     lt p gt This text should be blue  lt  p gt  x000D     lt p class  myclass1  gt This text should appear red  lt  p gt  x000D     lt p class  myclass2  gt This text should appear green  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I found a solution for your reference  from some group divs select from group of two same class divs the first one  p class   myclass   not  last-of-type   color red  p class   myclass   last-of-type  color green    BTW  I don t know why  last-of-type works  but  first-of-type does not work   My experiments on jsfiddle    https   jsfiddle net aspanoz m1sg4496

User · Answer

As a fallback solution  you could wrap your classes in a parent element like this    lt div gt       lt div gt This text should appear as normal lt  div gt       lt p gt This text should be blue  lt  p gt       lt div gt           lt  -- first-child   first-of-type starts from here -- gt           lt p class  myclass1  gt This text should appear red  lt  p gt           lt p class  myclass2  gt This text should appear green  lt  p gt       lt  div gt   lt  div gt

User · Answer

No  it s not possible using just one selector  The  first-of-type pseudo-class selects the first element of its type  div  p  etc   Using a class selector  or a type selector  with that pseudo-class means to select an element if it has the given class  or is of the given type  and is the first of its type among its siblings   Unfortunately  CSS doesn t provide a  first-of-class selector that only chooses the first occurrence of a class  As a workaround  you can use something like this    myclass1   color  red     myclass1    myclass1   color     default  or inherited from parent div         Explanations and illustrations for the workaround are given here and here

[css] CSS3 selector :first-of-type with class name?

Examples related to css

Examples related to css-selectors