Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selecting Sibling Elements with CSS
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with examples. Both of them allow selecting sibling elements that share the same parent element.
Syntax
/* Adjacent sibling selector */
selector1 + selector2 {
property: value;
}
/* General sibling selector */
selector1 ~ selector2 {
property: value;
}
Adjacent Sibling Selector (+)
The adjacent sibling selector (+) matches an element that occurs immediately after the first selector. Both elements must be children of the same parent element.
Example
The following example shows how div + p selects only the paragraph that comes immediately after a div element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
div + p {
font-size: 1.2em;
font-weight: bold;
background: powderblue;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph is NOT selected (no div before it)</p>
<div>First div</div>
<p>This paragraph IS selected (immediately after div)</p>
<span>Some span element</span>
<p>This paragraph is NOT selected (span before it, not div)</p>
<div>Second div</div>
<p>This paragraph IS selected (immediately after div)</p>
</div>
</body>
</html>
Only the paragraphs that come immediately after div elements are styled with larger font, bold text, and powder blue background. The other paragraphs remain unstyled.
General Sibling Selector (~)
The general sibling selector (~) selects all sibling elements that come after the first selector, regardless of their position. The elements must share the same parent.
Example
The following example shows how section ~ p selects all paragraphs that come after a section element −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
section {
background-color: #e0e0e0;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #666;
}
section ~ p {
text-align: center;
font-size: 1.2em;
font-weight: bold;
background: lavender;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<p>This paragraph is NOT selected (comes before section)</p>
<section>
<p>Text inside section (not affected by selector)</p>
</section>
<span>Some span element</span>
<p>This paragraph IS selected (comes after section)</p>
<div>Some div element</div>
<p>This paragraph IS also selected (still after section)</p>
</div>
</body>
</html>
All paragraphs that come after the section element are styled with centered text, larger font, bold weight, and lavender background with rounded corners. The paragraph inside the section and the one before it remain unstyled.
Key Differences
| Selector | Symbol | Selects |
|---|---|---|
| Adjacent Sibling | + |
Only the immediately following sibling |
| General Sibling | ~ |
All following siblings |
Conclusion
The adjacent sibling selector (+) targets only the immediate next sibling, while the general sibling selector (~) targets all subsequent siblings. Both selectors are powerful tools for styling elements based on their relationship to preceding elements.
3K+ Views
