CSS Combinators

In CSS, combinators are used to define relationships between HTML elements to target and style specific elements based on their relationship with other elements.

There are four primary combinators in CSS:

General Sibling Combinator (~)
Descendant Combinator (Whitespace)
Child Combinator (>)
Adjacent Sibling Combinator (+)
General Sibling Combinator (~)

General Sibling Selector (~):

The general sibling combinator selects all elements that share the same parent and are at the same level in the hierarchy as a specified element.

Syntax:

div ~ p {  
 /*style properties*/  
}

Example:

<!DOCTYPE html> 
<html> 

<head> 
    <title>General Sibling Selector</title> 
    <style>
        body {
            text-align: center;
        }

        h1~p {
            color: blue;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }

        div {
            font-size: 32px;
        }
    </style> 
</head> 

<body> 
    <h1>General sibling selector (~) property</h1> 
    <p>It is the first paragraph element which will get effected.</p> 
    <div> It is the div element 
        <p> It is the paragraph under the div element </p> 
    </div> 
    <p>It is the paragraph element after the div</p> 
    <p>It is the paragraph element which will also get affected</p> 
</body> 

</html>

Output:

Adjacent Sibling Combinator (+):

Adjacent Sibling Combinator (+): The adjacent sibling combinator selects an element that is immediately preceded by a specified element.

Syntax:

element + element {  
   /*style properties*/  
}

Example:

<!DOCTYPE html> 
<html> 

<head> 
    <title> Adjacent Sibling Selector </title> 
    <style>
        body {
            text-align: center;
        }

        p+p {
            color: Blue;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }

        p {
            font-size: 32px;
        }
    </style> 
</head> 

<body> 
    <h1> Adjacent sibling selector (+) property</h1> 
    <p> It is the first paragraph </p> 
    <p> It is the second paragraph which is immediately next to the first paragraph, and it get selected. </p> 
    <div> This is the div element </div> 
    <p> This is the third paragraph which does not get affected </p> 
    <p> This paragraph is also selected because it immediately next to third paragraph </p> 
</body> 

</html>

Output:

Child Combinator (>):

The child combinator selects all elements that are direct children of a specified element.

Syntax:

div > p {  
   /*style properties*/  
}

Example:

<!DOCTYPE html>
<html>

<head>
    <title> Child Selector </title>
    <style>
        body {
            text-align: center;
        }

        div>p {
            color: Blue;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }

        p {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1> Child selector (>) property</h1>
    <p> It is the first paragraph </p>
    <p> It is the second paragraph </p>
    <div>
        <h1>This is the div element</h1>
        <p> This is the 3rd paragraph which is the child of div</p>
        <p> This is the 4th paragraph and this get selected because of  child of div  </p>
    </div>
</body>

</html>

Output: