What is the difference between :first-child and :first-of-type?

by

A parent element can have one or more child elements:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Among these children, only one of them can be the first. This is matched by :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

The difference between :first-child and :first-of-type is that :first-of-type will match the first element of its element type, which in HTML is represented by its tag name, even if that element is not the first child of the parent. So far the child elements we’re looking at have all been divs, but bear with me, I’ll get to that in a bit.

For now, the converse also holds true: any :first-child is also :first-of-type by necessity. Since the first child here is also the first div, it will match both pseudo-classes, as well as the type selector div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Now, if you change the type of the first child from div to something else, like h1, it will still be the first child, but it will no longer be the first div obviously; instead, it becomes the first (and only) h1. If there are any other div elements following this first child within the same parent, the first of those div elements will then match div:first-of-type. In the given example, the second child becomes the first div after the first child is changed to an h1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Note that :first-child is equivalent to :nth-child(1).

This also implies that while any element may only have a single child element matching :first-child at a time, it can and will have as many children matching the :first-of-type pseudo-class as the number of types of children it has. In our example, the selector .parent > :first-of-type (with an implicit * qualifying the :first-of-type pseudo) will match two elements, not just one:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

The same holds true for :last-child and :last-of-type: any :last-child is by necessity also :last-of-type, since absolutely no other element follows it within its parent. Yet, because the last div is also the last child, the h1 cannot be the last child, despite being the last of its type.

:nth-child() and :nth-of-type() function very similarly in principle when used with an arbitrary integer argument (as in the :nth-child(1) example mentioned above), but where they differ is in the potential number of elements matched by :nth-of-type(). This is covered in detail in What is the difference between p:nth-child(2) and p:nth-of-type(2)?

More Related Contents:

  1. What does the “>” (greater-than sign) CSS selector mean?
  2. Is there a CSS selector for elements containing certain text?
  3. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  4. nth-of-type vs nth-child
  5. css3 nth of type restricted to class [duplicate]
  6. ::slotted CSS selector for nested children in shadowDOM slot
  7. wildcard * in CSS for classes
  8. nth-child doesn’t respond to class [duplicate]
  9. Select elements by attribute in CSS
  10. Nesting CSS classes
  11. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  12. Matching an empty input box using CSS
  13. not:first-child selector
  14. SASS: randomly pick background-image from a list
  15. What does “i” mean in a CSS attribute selector?
  16. Is there a workaround to make CSS classes with names that start with numbers valid? [duplicate]
  17. What does + mean in CSS? [duplicate]
  18. CSS Selector for nth range?
  19. CSS selector (id contains part of text)
  20. How do I get the nth child of an element using CSS2 selectors?
  21. Is the :before pseudo-element allowed on an input[type=checkbox]?
  22. CSS select multiple descendants of another element
  23. Select all ‘tr’ except the first one
  24. What are the rules around whitespace in attribute selectors?
  25. CSS – First child without certain class
  26. CSS select first element with a certain class
  27. Correct terms and words for sections and parts of selectors
  28. Why are spaces used to separate things in css
  29. What is the difference between pseudo-classes and pseudo-elements?
  30. Shorten verbose CSS that repeats combinations of elements and pseudo-classes

Leave a Comment