Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

4
  • 2
    first-type has been renamed to first-of-type Commented Jun 28, 2018 at 13:54
  • 56
    It does not work with classes. That's how it should work, because selecting the nth of a class would be more useful than selecting the nth of a tag. But ':first-of-type' has only ever worked by tagName. If it just so happens that 'first-of-class' and 'first-of-tag' refer to the same element, which they often do, it's easy to confuse yourself into thinking it does work that way; and then wondering what's broken when you come to a case in which they don't. Commented Sep 20, 2019 at 17:05
  • 2
    @Bernesto, when you have a case where you have multiple elements of the same "type", lets say <span>, and a few have the class highlight. The .highlight:first-of-type selector will select the first instance of the "type" with the selected class, in this example the first <span>, and not the first instance of the class highlight. Only if that first instance of span also has the class highlight will the style be implemented. (codepen.io/andrewRmillar/pen/poJKJdJ) Commented Mar 17, 2020 at 14:58
  • 2
    The reason my answer is so complex is because its final section, as well as my comments on several of the other answers, explains precisely why this is flawed. Adding a link to MDN to your answer two years after the fact doesn't exactly do anything to support it when you haven't tried to relate the MDN material to it - presumably because you can't. Commented May 11, 2021 at 15:38