CSS - Child Selectors

Child Selectors in CSS

CSS child selector selects all the direct children of a particular element. This is denoted by ’>’ (Greater than) symbol. It will not select elements that are further nested inside the child elements.

Syntax

The syntax for CSS child selectors is as follows:

selector > child-selector {

    /* property: value; */

    color: #04af2f

}

Child Selectors Example

In this example, we are changing the textcolorof the direct child element ofdivelement. The para element inside thespan tagremains unchanged as it is not a direct child of the div element.

Example 2

In this example, we are changing thefont sizeand font of the direct child element of the div element.