Open In App

Role of CSS selector

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss how CSS selector is important while we are designing the web page. The role of CSS selector in the responsive web page is very important. Let us discuss one by one.
Role of Child Selector: In Child Selector, properties of any element is the immediate parent of another element.
 

Syntax:  

if article > p  

It defines that the paragraph element is a direct child of the article, then the CSS selector properties will be applicable. 

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* In child selector any article
        element whose immediate parent is
        a section element. */
        section > article {
            color: green;
            font-size: 16px;
        }
 
        /* In child selector any h2
        element whose immediate parent
        is a section element. */
        section > h2 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>Child Selector</h1>
 
    <section>
        <h2>Subheading 1</h2>
 
        <!-- Applicable to Subheading 1
            because h2 is direct child
            of section here. -->
        <div>
            <article>
                In this example, article is
                not the direct child and
                ARTICLE which is inside DIV,
                which is inside SECTION. In
                CSS properties of child,
                selector will not apply in
                this section.
            </article>
        </div>
    </section>
 
    <h2>Subheading 2</h2>
    <section>
        <article>
            In this example ARTICLE as a
            direct child of the SECTION
            element. In CSS properties
            of child, selector will directly
            apply in this section.
        </article>
 
        <!-- Not applicable for Subheading 2,
            because h2 is not direct child
            of section here. -->
    </section>
</body>
 
</html>      


The output of the above code verifies if the child CSS selector properties are applicable to section elements.

Output: 
 

Role of Descendant Selector: The CSS selector properties of the descendant selector are applicable to every level or parent element.
Syntax: 

section li

It defines that “li” is the child but at any level it also considers only “li” element in section element and properties will be applicable.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* In this Descendant selector,
        properties will be applicable to
        all "li" elements that are inside
        section element. */
        section li {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>Descendant Selector</h1>
    <section>
        Table of contents:
        <ul>
            <li>Article 1</li>
            <li>Article 2</li>
            <li>Article 3</li>
        </ul>
    </section>
    <article>
        Shopping List:
        <ul>
            <li>Cookies</li>
            <li>Cake</li>
            <li>Pie</li>
        </ul>
    </article>
</body>
 
</html>


Output: 
 

 



Last Updated : 17 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads