CSS :only-of-type Selector

CSS :only-of-type selector selects every element that is the only child of its type within its parent element.

For this selector, the type of the element is very important. This is because it targets only that element which is the only one of its type within its parent.

It means that the parent element needs to not have only one child. It can have one or more child elements but the one which we are targetting must be the only one of its type.

In the following example, we are using p:only-of-type selector. It means only those <p> elements will be selected which are the only ones present within their parent. If there are more than one <p> elements inside the parent container, none of the <p> will be selected.

See this example for clarification:

Example:

p:only-of-type{
    background-color: yellow;
}

Here is one more example, which selects those <li> elements which are the only one of their type within their parent element.

Example:

li:only-of-type{
    background-color: yellow;
}

CSS Syntax

The syntax of the :only-of-type selector is as follows:

:only-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 :only-of-type selector.