What is the CSS :First-of-Type Pseudo-Class?

Sometimes you come across a scenario when you want to target a specific type of element within a group of siblings, and that's where the first-of-type pseudo-class helps you because it targets the first element from the specified type and group of siblings.

Suppose we have a div container; inside the container, there are many p elements, some of which are h1 elements. But you especially want to target the first h1 element in the sibling group. You can quickly solve this scenario with the CSS first of type pseudo-class.

The above illustration shows that inside our container, we have multiple h1 and p elements, and with the help of the first-of-type pseudo-class, we have targeted the first h1 element from the sibling group and changed the color to blue.

CSS Syntax

The basic syntax for the CSS first-of-type pseudo-class is as follows:-

Definition

The CSS first of type pseudo-class matches the first element of a particular type from the sibling's group.

Imagine a scenario where you have several nested containers inside the main container, and each nested container contains H1 and p elements. But if you especially want to target the first H1 element from each nested container, then the first-of-type pseudo-class will be the best suite for this.

Because the CSS first of type pseudo-class matches the first particular type of element from the group of siblings.

How To Use First of Type CSS

When styling a web page, you may encounter scenarios when you want to target the first element with a similar CSS styling. You can achieve this via the first-of-type pseudo-class.

Using CSS first-of-type selector is pretty easy, and you have to select the HTML element with tag selector and add "" at the end of the selected selector.

The first-of-type works with element/tag selectors such as div, p, span, and many more.

Suppose you have a div container. Inside the container are 2 p elements and one h1 and h2 elements.

And you want to style the first p element from the group of siblings.

Here's how you can utilize the first-of-type:-

Above, we are selecting the first p elements from the group of siblings, adding the border and background color, and limiting the element's width.

Output:-

You can see that the above style code only applies to the first paragraph in the image below because first-of-type only selects the first element from the sibling group.

Moreover, you can combine the pseudo-class with the class selector too.

How To Use Together With Class Selectors

The CSS first of type also can be combined with a class selector to select the first particular type of element from the group of siblings. You just have to select the type of element with the class name and add the CSS first-of-type pseudo-class at the end of the class name.

Example - Using Class Selector and Pseudo-class

Let's say we have an unordered list ul that contains several list items with the .first class name.

To select the first li element, you can use CSS first-of-type like the below code:-

In the above code, we select the first li element with the help of class name and first-of-type selector.

Output:-

How To Use With CSS First Child of Type

You can also style the first child of a parent element with the first-of-type pseudo-class. You must choose the parent and the first child you want to style.

Example - Decorating the First Child of Style in CSS

Let's say you have a div container with one h2 heading and several divs with h2 headings and p tags.

And you want to style all the h2 heading even the inside the nested div containers heading.

Here how you can do it:-

All the h2 headings will turn blue because of our applied CSS.

Output:-

Browser Compatibility

The CSS first-of-type is compatible with most browsers:

• Chrome
• Edge 12.0+
• Firefox 3.5
• Internet Explorer 9+
• Opera 8+