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
Selected Reading
Selects all elements that are placed immediately after elements with CSS
The CSS adjacent sibling selector (element+element) selects elements that are placed immediately after a specified element. This selector only targets the first element that directly follows the specified element at the same level in the DOM hierarchy.
Syntax
element1 + element2 {
/* CSS properties */
}
Where element1 is the preceding element and element2 is the element that immediately follows it.
Example
The following example demonstrates how to style paragraphs that immediately follow div elements −
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
color: white;
background-color: blue;
padding: 10px;
margin: 5px 0;
}
p {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<div>
<p>This paragraph is inside the div.</p>
</div>
<p>This paragraph immediately follows the div - it will be styled.</p>
<p>This paragraph follows the previous p - it will NOT be styled.</p>
</body>
</html>
A webpage displays with: - Normal black text inside the div - The first paragraph after the div has white text on blue background with padding - The second paragraph after the div remains unstyled (normal black text)
Key Points
- Only selects the immediately adjacent sibling element
- Both elements must share the same parent
- The elements must be at the same level in the DOM hierarchy
- Only the first matching element is selected, not subsequent ones
Conclusion
The adjacent sibling selector (+) is useful for styling specific elements that follow other elements. It provides precise control over element selection based on their position in the DOM structure.
Updated on: 2026-03-15T12:45:10+05:30
399 Views
Advertisements