CSS Reference Pseudo-class

:first-of-type

: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.

In other words, :first-of-type matches the first occurrence of an element inside its parent. For example, the following rule will select and style the first paragraph in .container.

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <!-- .... -->
</article>
                
p:first-of-type {
    font-size: 1.5em;
}
                

Trivia & Notes

:first-of-type is similar to the :first-child selector, except that it is more specific than the latter—:first-of-type will select the first paragraph in the above example whether or not it is the first child of the article; :first-child, on the other hand, is used to select the element only if it is the first child of its parent. So, this:

p:first-child {
    font-size: 1.5em;
}
                

will not style the first paragraph above because it is not the first child of its parent. You can read more about the :first-child selector in its entry.

The :first-of-type pseudo-class, just like other pseudo-classes, can be chained with other selectors such as :hover, for example, to provide hover styles for selected element. It can also be chained with pseudo-elements ::before and ::after. See the examples and live demo sections below for examples.

Examples

Suppose you have the following markup:

<div class="container">
    <h1>Title</h1>
    <nav>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
        </ul>
    </nav>
    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
        </p>
        <p>
            Lorem Ipsum...
        </p>
    </article>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum...
        </p>
        <p>
            Lorem Ipsum
        </p>
    </article>
</div>
                

The following rule will select the first article in the above .container:

article:first-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}
                

The following rule will select the first occurrence of a paragraph in its parent’s list of children:

p:first-of-type {
    font-weight: bold;
}
                

The following rule will select the first occurrence of a link inside its parent and use pseudo-elements to print the href of that link, wrapped in parenthesis, right after it:

a:first-of-type {
    color: deepPink;
}

a:first-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}
                

You can see a live demo of this example in the next section.

Browser Support

The :first-of-type pseudo-class is supported in Chrome, Firefox, Safari, Opera 9.5+, Internet Explorer 9+, and on Android and iOS.

Further Reading

Written by . Last updated February 3, 2015 at 12:34 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.