Descendant Selectors

Written by

in

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p&gt;This is a p element inside a div.&lt;/p&gt;&lt;p&gt;This is second p element inside a div&lt;/p&gt;&lt;/div&gt;&lt;p&gt;This is a p element outside the div element.&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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);
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div&gt;Box 1&lt;/div&gt;&lt;/div&gt;&lt;div class="container2"&gt;Box 2&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts