CSS - Descendant selector


CSS - Descendant selector 

  • In CSS, Descendant selector is used to apply a style guideline to a specific element when it lies inside another element.

Example:

  • style rule will apply to <li> element only when it lies inside <ol> tag.
ol li { 
    list-style-type: disc; 
}

Sample Code :

<!DOCTYPE html>
<html>
<head>
<style>
    ol li { 
        list-style-type: square; 
        }
    ul li { 
        list-style-type: circle; 
    }
</style>
</head>
    <body>
        <ol>
            <li>Web Development</li>
            <ul>
                <li>NodeJS</li>
                <li>PHP</li>
            </ul>
                <li>Database</li>
            <ul>
                <li>MySql</li>
                <li>Oracle</li>
            </ul>
        </ol>
    </body>
</html>


Code Explanation :


   Here, ol li is a Descendant Selector which selects all <li> elements inside <ol> elements. 

    List style type property is used in css to assign a bullets for the list. Here we have assigned square bullets for the list which appears inside the ordered list.  

   Here, ul li is a descendant selector which selects all <li> elements inside <ul> elements.        

    List style type property with a value circle will assign a bullet for the list which appears inside the unordered list.    

Output :


 The list text web Development will have square bullet as displayed in the browser window.

   The lists NodeJS and PHP will be displayed with circle bullet as displayed in the browser window. 

    Similarly, the list text Database which appears inside the ordered list <ol> element will be displayed with squared bullet in the browser window. 

    The lists MySQL and Oracle which appear inside the unordered list <ul> element will be displayed in the browser window with circle bullet as shown.