:first-of-type Back

• :first-of-type is a pseudo-class selector that selects an element that is the first element (sibling(兄弟姐妹關係)) of its type in the list of children of its parent.

Case: understanding :first-of-type

See the Pen OMxrLj by aleen42 (@aleen42) on CodePen.

Note

• Differences between :first-child and :first-of-type is:

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <!-- .... -->
</article>

p:first-child {
    /** styles is not applied because there is a h1 tag before the p tag */
}

p:first-of-type {
    /** stsyles will applied to the first paragrath */
}