CSS :first-of-type selector selects every element that is the first element of its type within its parent element. This first element can be of any type, like a <p>, <div>, <li>, <ul> etc.
Unlike the :first-child selector, the :first-of-type selector targets the first element of its type regardless of its occurrence within its parent.
This means that the target element needs not be the first child of its parent. It could be the second or the third child of its parent but must be the first one of its type.
In the following example, the p:first-of-type selector selects the very first element of type <p> within its parent and sets a yellow background color to it.
Example:
p:first-of-type{
background-color: yellow;
}
If we take the above example and use p:first-child instead of p:first-of-type, it would not select any element. This is because the p:first-child selector targets all the <p> elements which are the first child of their container.
But, in our case, the <h3> element is the first child its parent(<body>) and it is of type <h3> not <p>. Therefore, no element wil be selected.
Here is the same example as above but with the :first-child selector:
Example:
p:first-child{
background-color: yellow;
}
Select Nested Elements with :first-of-type Selector
With the :first-of-type selector, we can also target the nested elements of a specific type.
To do that we have to simply put a space between the parent element and the :first-of-type selector.
For example, if you want to select the first element of type <p> which is inside a <div> element, you have to use div p:first-of-type.
Here is a working example:
Example:
div p:first-of-type{
background-color: yellow;
}
If you do not specify the type of the nested element, the first element of each type will be selected.
See this example:
Example:
div :first-of-type{
background-color: yellow;
}
CSS Syntax
The syntax of the :first-of-type selector is as follows:
:first-of-type{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :first-of-type selector.
| Selector | |||||
| :first-of-type | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
