Open In App

What is the General Sibling Combinator ?

Improve
Improve
Like Article
Like
Save
Share
Report

General Sibling Combinator: The general sibling combinator selects the element that follows the first selector element and also shares the same parent as the first selector element. This combinator can be used to select a group of elements that share the same parent element.

Syntax:

former_element ~ target_element { 
    // CSS styles 
}

Note: former_element and target_element are two different HTML elements. 

Example 1: In this example, we are creating an HTML div element. We are adding two elements (div and paragraph elements), and after closing the main div element, we are adding one paragraph element. We are using the general sibling combinator for div and paragraph elements to add styles to it.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the General Sibling Combinator ? 
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        div~p {
            color: #009900;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>What is the General Sibling Combinator?</h3>
    <div>
        <div>Div Content 2</div>
        <p>Paragraph Content 1</p>
    </div>
    <p>Paragraph Content 2</p>
</body>
  
</html>


Output:

 

Example 2: In this example, we are creating three siblings <h4>, <p>, and <div> elements. After that, we use the general sibling combinator to select the elements and apply some styles to them.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        What is the General Sibling Combinator ? 
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
  
        h4 ~ p {
            color: #009900;
            font-size: 24px;
        }
  
        h4 ~ div {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>What is the General Sibling Combinator?</h3>
    <h4>Heading 4 Content</h4>
    <p>Paragraph Content</p>
    <div>Div Content</div>
</body>
  
</html>


Output:

 



Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads