CSS Descendant Combinator Selector

So far, you have used the selectors to target particular elements or collective elements with a specific ID or class. It is quite a powerful feature, but what if you wish to limit this feature to some specific part of the page? In this chapter, you will learn about the descendant combinator and its working.

Use of Descendant Selector in CSS

Descendant selector permits you to add a limitation to any targeted HTML elements, for the ones who are offspring or descendants of some other element. Then why we call it a descendant combinator? Combinators are some concept which is used to explain the association or connection among the selectors. Selectors in CSS may have more than one simple or basic selector. So, in between these basic or simple selectors, you can incorporate or make use of a combinator.

There are four special combinators provided by CSS:
  • General sibling selector (~)
  • Descendant selector (space)
  • Child selector (>)
  • Adjacent sibling selector (+)

Let us discuss each of them one by one and see how to implement them:

General Sibling Selector

It is implemented for selecting the element that trails the initial or first selector element and shares the same parent as the first selector element. The general sibling selector is explicitly implemented for choosing a group of elements allocated for the same parent element.

Here is a sample example of how it can be implemented:

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div ~ p {
            background-color: whitesmoke;
        }
    </style>
</head>

<body>

    <p>Some text here.</p>
    <div>
        <p>Some text here.</p>
    </div>
    <p>Some text here.</p>
    <p>Some text here.</p>

</body>
</html>

Descendant Selector

This selector is implemented to select every child element within the particular tag mentioned in the CSS selector section. The tags may be of the direct child of any specific tag or extremely deep within the particular tag. Here is a code snippet showing below how descendant selector adds <p> elements that are within the <div> elements.

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div p {
            background-color: whitesmoke;
        }
    </style>
</head>

<body>

    <div>
        <p>This Paragraph is within div.</p>
        <p>This Paragraph is within div.</p>
        <section>
            <p>This Paragraph is within section and section is within div.</p>
        </section>
    </div>
    <p>This Paragraph is not within div.</p>

</body>
</html>

Child Selector

It is implemented for selecting that particular element that lies within the immediate child of that specific tag. It is more precise or exact than the descendant selector since it chooses only the second selector if it has the first selector element as its parent.

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div > p {
            background-color: whitesmoke;
        }
    </style>
</head>

<body>

    <div>
        <p>This Paragraph is within div.</p>
        <p>This Paragraph is within div.</p>
        <section>
            <p>This Paragraph is within section and section is within div.</p>
        </section>
    </div>
    <p>This Paragraph is not within div.</p>

</body>
</html>

Adjacent Sibling Selector

This selector is implemented for selecting all those elements, which are the contiguous or neighboring siblings of a particular element. Here, the sibling elements ought to have the identical parent element as well as "adjacent," i.e., "immediately following".

Here is an example of how to implement this adjacent sibling selector:

Example:
<!DOCTYPE html>
<html>

<head>
    <style>
        div + p {
            background-color: whitesmoke;
        }
    </style>
</head>

<body>

    <p>This Paragraph is not within div.</p>
    <div>
        <p>This Paragraph is within div.</p>
        <p>This Paragraph is within div.</p>
    </div>
    <p>This Paragraph is not within div.</p>

</body>
</html>

Scroll Back to Top