CSS Child Selector

CSS child selector selects all the elements that are direct children of a given element.

Unlike, the descendant selector, the child selector only selects those descendants that are direct children of the element. The descendants that are not the direct children of the given element remain unaffected.

To select the direct children of an element using the child selector, use a greater than symbol(>) between the parent and the child. For example, div > p, ul > li.

In the example below, the child selector selects all the <p> elements that are direct children of the <div> element and applies the same style to each of them. Try it out:

Example:

div > p{
   background: yellow;
   padding: 5px;
   border: 2px solid blue;
}

The child selector in the example below selects all the <li> elements that are direct children of the <ul> element and puts a yellow background on each of them.

Example:

ul > li{
   background: yellow;
   margin: 5px;
}

CSS Child Selector Syntax

The child selector has the following syntax:

parent > child{
   CSS styles
}

Related Pages

CSS Tutorial: CSS Selectors

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.