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
Adjacent Sibling Selectors in CSS
The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It selects only those elements which immediately follow the first selector. The + sign is used as a separator between the two selectors.
Syntax
element + element {
/* CSS declarations */
}
Example: Basic Adjacent Sibling Selection
The following example demonstrates how the adjacent sibling selector works with div elements −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8px;
height: 50px;
width: 60px;
display: inline-block;
border-radius: 5%;
border: 2px solid brown;
box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
border-radius: 50%;
background-color: orange;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
Three boxes appear: the first has a square shape with brown border, while the second and third have circular shapes with orange background, demonstrating how div + div selects each div that follows another div.
Example: Selecting Next Span Element
In this example, the adjacent sibling selector targets the span element that directly follows another span −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 1.5em;
padding: 10px;
}
span {
background-color: lavender;
padding: 5px;
margin: 2px;
}
span + span {
background-color: darkseagreen;
}
</style>
</head>
<body>
<p>
<span>First span</span>
<span>Adjacent span</span>
<span>Another adjacent span</span>
</p>
</body>
</html>
The first span has a lavender background, while the second and third spans have dark sea green backgrounds, showing how span + span selects spans that follow other spans.
Example: Selecting Paragraph After Div
This example shows how to select a paragraph element that immediately follows a div element −
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
color: white;
background-color: red;
border: 2px solid green;
padding: 10px;
margin: 5px 0;
}
div {
background-color: #f0f0f0;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>First div element</div>
<p>This paragraph follows a div (selected)</p>
<p>This paragraph follows a p (not selected)</p>
<div>Second div element</div>
<p>Another paragraph after div (selected)</p>
</body>
</html>
Only the paragraphs that directly follow div elements have white text on red background with green border. Other paragraphs remain unstyled.
Example: Consecutive Paragraph Selection
In this example, paragraphs that immediately follow other paragraphs are selected using p + p −
<!DOCTYPE html>
<html>
<head>
<style>
p + p {
color: white;
background-color: red;
border: 2px solid green;
padding: 8px;
margin: 5px 0;
}
p {
margin: 5px 0;
padding: 8px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>First paragraph (not selected)</p>
<p>Second paragraph (selected - follows p)</p>
<p>Third paragraph (selected - follows p)</p>
<div>A div element</div>
<p>Fourth paragraph (not selected - follows div)</p>
<p>Fifth paragraph (selected - follows p)</p>
</body>
</html>
The second, third, and fifth paragraphs have white text on red background with green border, while the first and fourth paragraphs remain unstyled, demonstrating that only paragraphs immediately following other paragraphs are selected.
Conclusion
The adjacent sibling selector (+) is a powerful tool for selecting elements that immediately follow specific elements. It only selects the direct next sibling, making it useful for styling consecutive elements or creating specific layout patterns.
1K+ Views
