Loading

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: