first-of-type and first-child are very similar pseudo selectors and will often target the same element. When they don't it can be confusing, so let's look at what they do.
First Child
first-child
will look only at the first child element. In example one below .example-one div:first-child {}
will select the first div. If we were to try that with example 2 and write .example-two div:first-child {}
it would select nothing. This is because the first child is not a div, its a <h1>
<section class="example-one">
<div></div>
<div></div>
<div></div>
</section>
<section class="example-two">
<h1>Hello World</h1>
<div></div>
<div></div>
</section>
First of Type
When you use the first-of-type
pseudo selector it will select the first child element that matches that type. Consider the same code as above but with first-of-type
.
example-one div:first-of-type {}
will still select the first <div>
. This is because it's the first child and the first of type.
example-two div:first-of-type {}
doesn't select nothing, like it did with first-child
but selects the second child which is the first element of type <div>
What's the difference?
There can be only one element that matches the first-child
pseudo selector. This is because every parent element only has one element that is the first in that list.
For every parent element, there can be many fist-of-type
elements. Every element that is the child of a parent element can be selected with the first-of-type
pseudo selector.
Top comments (0)