CSS - Descendant Selectors

Quiz

Descendant Selectors in CSS

CSS descendant selector styles all the tags that are children of a particular specified tag. A single space between the parent element and child element is used to mention a descendant.

Syntax

The syntax for CSS descendant selectors is as follows:

selector_1 selector_2 {
    /* property: value; */
    color: #04af2f
}

Descendant Selectors Example

In this example, we have set a border for all the p elements inside a div element. The p elements outside the div element will not have any styles applied to them.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        div p {
            border: 2px solid #04af2f;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a p element inside a div.</p>
        <p>This is second p element inside a div</p>
    </div>

    <p>This is a p element outside the div element.</p>
</body>
</html>

Example 2

In this example, we have used CSS transition property with rotate() function of CSS transform property to rotate the written text of the div element with the class name container.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .container, .container2 {
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: #04af2f;
            color: white;
            font-size: 20px;
            font-family: Verdana, sans-serif;
            padding: 10px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
        }

        .container div:hover {
            transition: transform 0.5s ease;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Box 1</div>
    </div>
    <div class="container2">Box 2</div>
</body>
</html>

Print Page