Definition and Usage

:first-of-type pseudo-class selector Selects the element that is the first sibling of the same tag type among its parent’s children.

"Same tag type" refers to the element's tag name.

For example, p:first-of-type selects the first <p> element among only the <p> elements that share the same parent.

Basic Example

HTML 
<section>
    <p>First 'p' element of its type</p>
    <div>First 'div' element of its type</div>
    <p>Second 'p' element of its type</p>
    <p>Third 'p' element of its type</p>
    <div>Second 'div' element of its type</div>
    <div>Third 'div' element of its type</div>
</section>
CSS 
/* Selects the first <p> element of its type among <section> children */
section p:first-of-type {
    background-color: yellowgreen;
}

/* Selects the first <div> element of its type among <section> children */
section div:first-of-type {
    background-color: orange;
}
Rendered Output

Syntax

CSS 
:first-of-type {
    /* ... */
}

Practical Examples

These examples help you understand how the :first-of-type pseudo-class selector works.

Styling the First Paragraph Element

HTML 
<article>
    <h2>Heading Element</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</article>
CSS 
article p:first-of-type {
    background-color: yellowgreen;
}
Rendered Output

Styling Nested Elements

HTML 
<article>
    <div>This 'div' is the first one.</div>
    <div>This <span>nested 'span' is the first one.</span>!</div>
    <div>
        This <em>nested 'em' is the first one.</em>, but this <em>nested 'em' is the last one.</em>!
    </div>
    <div>This <span>nested 'span' is styled.</span>!</div>
    <p>This 'p' is the first one.</p>
    <div>This 'div' is the last one.</div>
</article>
CSS 
article :first-of-type { /* Same as article *:first-of-type */
    background-color: yellowgreen;
}
Rendered Output

Things to Keep in Mind

The :first-of-type pseudo-class selector selects the element that is the first sibling of a specific tag type among its siblings.

"Same tag type" refers to the element's tag name.

Let's look at the following example:

HTML 
<style>
    .red-item:first-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>No red-item class here</li>
    <li class="red-item">Expected to match, but it doesn't</li>
    <li class="red-item">li</li>
</ol>
<!--
    * Did it select the first element with the .red-item class?
    * If so, that is incorrect.
    *
    * :first-of-type selects the first element of a given tag type among its siblings.
    *
    * .red-item:first-of-type can be broken down as follows:
    * => .red-item: targets elements with the class value 'red-item'.
    * => Specific type refers to the tag name.
    * => In this case, the <li> element is the specific type.
    * => The first <li> of this type must have the class 'red-item' to be selected.
    * => Therefore, none of the elements above match.
-->
Rendered Output No elements are matched by the .red-item:first-of-type selector.

Be careful! If you don't understand that the specific type refers to the tag name, the :first-of-type pseudo-class may seem like it's not working correctly.

Browser compatibility

Browser Compatibility for the :first-of-type Pseudo-Class
Selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
:first-of-type 1 12 3.5 9.5

Specifications

Specification for the :first-of-type Pseudo-Class
Specification
:first-of-type Selectors Level 4
#first-of-type-pseudo

References

See also