The general sibling selector (~) in CSS is a powerful combinator used to target elements that are siblings of a specified element and appear after it in the DOM tree. Unlike the adjacent sibling selector (+), which only targets the immediately following sibling, the general sibling selector applies to all matching siblings that come after the specified element.
Syntax
element1 ~ element2 {
/* styles */
}
- element1 is the reference sibling.
- element2 is styled if it appears after element1 within the same parent.
1. Highlight All Siblings After a Clickable Element
Use the general sibling selector to style elements that follow a specific clickable button or link.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.child-btn:hover~.highlight {
background-color: burlywood;
font-size: 23px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="parent">
<button class="child-btn">Highlight All Below</button>
<p class="highlight">Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p class="highlight">Paragraph 3</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
2. Applying accordion effect or toggle effect on any element
Create a simple accordion menu where clicking one heading toggles the visibility of subsequent content.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.accordion-content {
display: none;
}
.accordion-heading:focus~.accordion-content {
display: block;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="accordion">
<h3 class="accordion-heading" tabindex="0">Section 1</h3>
<p class="accordion-content">Content for section 1.</p>
<h3 class="accordion-heading" tabindex="0">Section 2</h3>
<p class="accordion-content">Content for section 2.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
3. Style Dynamic Lists
Apply styles to list items dynamically based on the position of a specific item.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.start-point~li {
color: red;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul class="dynamic-list">
<li>Item 1</li>
<li class="start-point">Start styling here</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
4. Mark Required Fields After a Label
Consecutive input fields after any label can be styled using general sibling selector.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.required-label~.input-field {
border: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="form">
<label class="required-label">Required Fields:</label>
<input type="text" class="input-field" placeholder="Name">
<input type="email" class="input-field" placeholder="Email">
<input type="password" class="input-field" placeholder="Password">
</div>
</body>
</html>
<!--Driver Code Ends-->
5. Style Notes or Warnings After a Heading
The general sibling selector help's to style all the notes and warnings after a particular heading.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h2~.note {
border-left: 4px solid orange;
padding-left: 10px;
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="notes-section">
<h2>Important Information</h2>
<p class="note">Note 1: Read the instructions carefully.</p>
<p class="note">Note 2: Double-check your work.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
6. Styling inputs after a particular label
The general sibling selector help's to style all the input's after a particular label.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.main:focus~.one {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="" class="main" tabindex="0">Click me to style input:</label>
<input type="text" class="one">
<input type="text" class="one">
<input type="text" class="one">
</body>
</html>
<!--Driver Code Ends-->