Combinators in CSS

Combinators in CSS

For more questions and answers visit our website at Frontend Interview Questions

Types of CSS Combinators

There are four main types of CSS combinators:

1. Descendant Combinator (space)
2. Child Combinator (>)
3. Adjacent Sibling Combinator (+)
4. General Sibling Combinator (~)

1. Descendant Combinator (Space)

The descendant combinator is a space between two selectors. It selects all elements that are descendants of a specified element.

Syntax:

ancestor descendant {
    /* styles */
}

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Descendant Combinator Example</title>
    <style>
        .container p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>This paragraph is inside the container and will be blue.</p>
    </div>
    <p>This paragraph is outside the container and will not be blue.</p>
</body>
</html>

In this example:

• The selector .container p applies styles to all p elements that are…