CSS - General Sibling Selectors

Quiz

General Sibling Selectors in CSS

CSS general sibling selector ( "~" ) selects all the elements that are siblings of a specified element sharing the same parent. It will select all matching siblings, not just the one immediately following. A tilde ( "~" ) symbol is used to denote the general sibling.

Syntax

The syntax for CSS general sibling selectors is as follows:

selector1 ~ selector2 {
    /* property: value; */
    color: #04af2f
}

Example of General Sibling Selectors

In this example, we have used general sibling selector to change the text color of all p elements that are immediate siblings of the div element.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid #031926;
      }
      div ~ p {
         color: #04af2f;
      }
   </style>
</head>

<body>
      <p>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will be blue.
      </p>
</body>
</html>

Example 2

In this example, we have used a general sibling selector to change the background color and font of all the p elements after the h3 tag.

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            padding: 20px;
            border: 2px solid #031926;
            font-family: Verdana, sans-serif;
        }
        h3 ~ p {
            font-family: Verdana, sans-serif;
            font-size: 20px;
            font-style: italic;
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>This is an h3 tag</h3>
        <p> 
            This is a p tag that immediately follows the h3 tag.
        </p>
        <p>
            This is another p tag, but it is not immediately 
            after the h3 tag.
        </p>
    </div>
    <p>This is a p tag which is outside the parent div element.</p>
</body>

</html>

Print Page