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

The draft CSS Selectors Level 4 proposes to add an of 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.