CSS Element Element Selector

Last Updated : 15 Apr, 2025

The element element selector (without the > symbol) selects all descendant elements of a specified parent element. It applies styles not only to direct children but also to any deeper nested elements, making it more general than the direct child selector.

Descendant selection: Targets all nested elements, not just direct children.
Universal coverage: Affects every level of nesting within the selected parent.
Broader selection scope: Useful for styling entire sections or elements regardless of depth.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        .container p {
            color: red;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <div class="container">
        <p>Directly inside the container.</p>
        <div>
            <p>Inside a nested div.</p>
            <span>Span is also inside the nested div.</span>
        </div>
    </div>
</body>
</html>
<!--Driver Code Ends-->

In this example:

The container p selector targets all <p> elements that are descendants of the .container div, whether they are direct children or deeply nested.
Both <p> elements (inside and outside the nested <div>) will be styled with the color blue.

Use Cases of descendant selector

1. Changing List Item Style in a Specific List

By using the descendant selector, you can style only the list items within a particular list by targeting ul#main-list li. This approach helps differentiate styles for different lists on the page.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ul#main-list li {
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <ul id="main-list">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ul>
        <li>Item A</li>
        <li>Item B</li>
    </ul>
</body>
</html>
<!--Driver Code Ends-->

2. Styling paragraphs Inside a Specific div

Styling paragraphs inside a specific <div> allows you to target and apply CSS rules to only the paragraphs within that particular div. By using a class or ID selector on the div, you can control the appearance of the paragraphs contained within it without affecting others on the page."

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        div.special p {
            color: blue;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <div class="special">
        <p>This paragraph inside the 'special' div.</p>
        <h4>This is also inside</h4>
    </div>
    <div>
        <p>This paragraph is outside the 'special' div.</p>
    </div>
</body>
</html>
<!--Driver Code Ends-->

3. Styling Form Inputs in a Specific Form

You can apply styles specifically to form inputs inside a particular form using the descendant selector. For instance, form#contact-form input will target inputs inside the form with the ID contact-form.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        form#contact-form input {
            padding: 10px;
            background-color: lightgray;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <form id="contact-form">
        <input type="text" placeholder="Your Name">
    </form>
    <form>
        <input type="text" placeholder="Another Form Name">
    </form>
</body>
</html>
<!--Driver Code Ends-->

Why Use the Element Element Selector?

Broad application: Ideal for when you want to apply styles to all descendant elements within a container, regardless of their depth.
Simplicity: The selector is simple to use and doesn’t require you to explicitly specify direct children or nesting levels.
Less specificity: Works well when you don’t need precise control over specific child elements but want to style a broad range of descendants.

Pros and Cons of Using the Element Element Selector

Pros	Cons
Applies styles to all descendants, making it perfect for broad styling needs.	Can lead to unintended styles being applied to nested elements deeper than expected.
Reduces the need for writing extra classes or IDs for deep nesting.	May cause performance issues in very large documents with deeply nested structures.
Simple to use and highly flexible.	Might override styles that are meant for specific elements, especially in complex layouts.

Vishal Chaudhary 2

Improve

Article Tags :

CSS Element Element Selector

Use Cases of descendant selector

1. Changing List Item Style in a Specific List

2. Styling paragraphs Inside a Specific div

3. Styling Form Inputs in a Specific Form

Why Use the Element Element Selector?

Pros and Cons of Using the Element Element Selector

Similar Reads

Thank You!

What kind of Experience do you want to share?