How Do You Combine Selectors in CSS?

Posted By Bajarangi soft , Posted On 30-09-2020

A combinator is something that explains the relationship between the selectors,A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator,The descendant selector matches all elements that are descendants of a specified element,The child selector selects all elements that are the children of a specified element,The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element,The general sibling selector selects all elements that are siblings of a specified element.

1. Descendant Selector

<!DOCTYPE html>
<html>
<head>
    <style>
        div > p {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
    <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <style>
        div > p {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
    <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>

2. Descendant Selector with examples

<!DOCTYPE html>
<html>
<head>
    <style>
        div ~ p {
            background-color: yellow;
        }
    </style>
</head>
<body>

<p>Paragraph 1.</p>

<div>
    <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>