CSS - Child Selectors

Quiz

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 text color of the direct child element of div element. The para element inside the span tag remains unchanged as it is not a direct child of the div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .myDiv > p {
            color: #04af2f;
        }

    </style>
</head>
<body>
    <div class="myDiv">
        <p>It is a paragraph element. Direct child of div element.</p>
        <span><p>This is a p element inside div but not direct child of div.</p></span>        
    </div>
    <p>This is a p element outside div.</p>    
</body>
</html>

Example 2

In this example, we are changing the font size and font of the direct child element of the div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .myDiv > p {
            border: 2px solid #031926;
            font-size: 20px;
            font-family: Verdana, sans-serif;
        }

    </style>
</head>
<body>
    <div class="myDiv">
        <p>It is a paragraph element. Direct child of div element.</p>
        <span><p>This is a p element inside div but not direct child of div.</p></span>        
    </div>
    <p>This is a p element outside div.</p>    
</body>
</html>

Print Page