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
