CSS Descendant Combinator Selector

So far, you have used the selectors; they are used for targeting particular element or collective elements having a specific ID or class. It is a quite 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 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 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 which trails the initial or first selector element; as well as shares the same parent as first selector element also. The general sibling selector is implemented explicitly for choosing a group of elements which gets 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 for selecting every single child elements within the particular tag mentioned in the CSS selector section. The tags may be of the direct child of any specific tag or can be extremely deep within the particular tag. Here is code snippet showing below the how descendant selector adds <p> elements which 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 which 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