CSS :only-child Selector

CSS :only-child selector selects every element that is the only child of its parent. It means that it will select only those elements which have no siblings.

For example, if you use p:only-child, it will select every <p> element that is the only child of its parent.

Here is an example:

Example:

p:only-child{
   background-color: yellow;
}

Here is another example which selects all <li> elements that are the only child of their parent element. This parent element can be a <ul> or an <ol>.

Example:

li:only-child{
   background-color: yellow;
}

CSS Syntax

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

:only-child{
   CSS Styles;
}

Browser Support

The number in each cell of the table specifies the first version of the browser that fully supports the :only-child selector.

Selector
:only-child4.09.03.53.29.6

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts