Adjacent Sibling Selector in CSS
An adjacent sibling selector in CSS selects that element that is the next sibling of another element. Here, the term “sibling” refers to elements that share the same parent element within an HTML document structure. Thus, sibling elements are elements that are nested at the same level within their parent container.
For example, consider the following HTML structure:
<div class="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
</div>In this structure, we have defined three <p> elements (Paragraph 1, Paragraph 2, and Paragraph 3) and the <div> element (Div 1). All these elements are siblings of its parent element because they share the same parent element, which is the <div class=”parent”>. Each of these elements is a child of the parent div element with class attribute value “parent”.
In CSS, there are two types of sibling selector that are as:
- Adjacent sibling selector
- General sibling selector
These selectors help you to style based on the relationship between HTML elements that are at the same hierarchical level in the document. In this tutorial, we will understand only adjacent sibling selector in CSS with the help of various examples. In the next, we will understand general sibling selector.
Syntax to Define Adjacent Sibling Selector in CSS
The adjacent sibling selector in CSS allow you to style an element that is immediately next preceding of another specified element. It is denoted by the “+” symbol. The general syntax is as:
element1 + element2 {
/* CSS properties */
}In the above syntax, element1 is the preceding sibling element. While, element2 is the adjacent sibling element to which the styles will be applied.
Basic Example on Adjacent Sibling Element
Let’s take some examples based on the adjacent sibling selector in CSS.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Simple Adjacent Sibling Selector Example</title>
<style>
p + p {
color: blue;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
</body>
</html>
Output:
In this example, the CSS rule p + p will apply the color blue to the second and third paragraphs because they are both immediately preceded by another p element.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Adjacent Sibling Selector with Different Elements Example</title>
<style>
h1 + p {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>First Paragraph after heading.</p>
<p>Second paragraph.</p>
</body>
</html>
Output:
In this example, we have defined one h1 heading and two paragraph elements. The adjacent sibling selector h1 + p will apply the CSS rule to the paragraph that immediately follows the h1 element.
Example 3:
<!DOCTYPE html>
<html>
<head>
<title>CSS Adjacent Sibling Selector</title>
<style>
div + p {
color: white;
background-color: red;
}
</style>
</head>
<body>
<h2>This is a Heading.</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<div>This is div element.</div>
<p>This is the third paragraph.</p>
<p>This is the fourth paragraph.</p>
</body>
</html>
Output:
In this example, the adjacent sibling selector div + p will apply the CSS rule to the paragraph that immediately follows the <div> element. Only the third paragraph after the <div> will be styled.
Combining Adjacent Sibling Selector with Other Selectors
You can combine the adjacent sibling selector with other selectors to create more specific and powerful rules. Let’s understand each combination with examples.
Example 4: Combining with Class Selector
<!DOCTYPE html>
<html>
<head>
<title>Adjacent Sibling Selector with Class Selector</title>
<style>
.highlight + p {
color: white;
background-color: green;
}
</style>
</head>
<body>
<div class="highlight">This is a div element with class attribute value highlight.</div>
<p>This is the first paragraph having a red background and text color green.</p>
<p>This is the second paragraph that will not be styled.</p>
</body>
</html>
In this example, we have combined the adjacent sibling selector with class selector by ‘+’ symbol. This selector .highlight + p will apply the CSS rule to the paragraph immediately following the div element with the class attribute value ‘highlight’. Only the first paragraph after the highlighted div will be styled.
Example 5: Multiple Classes and Elements
<!DOCTYPE html>
<html>
<head>
<title>Adjacent Sibling Selector with Multiple Classes</title>
<style>
.highlight + .info {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div class="highlight">This is a div element with the class attribute value highlight.</div>
<p class="info">This is the first paragraph element with class attribute value info.</p>
<div class="info">This is a div element with class attribute value info.</div>
<p class="info">This is the second paragraph element with class attribute value info. </p>
</body>
</html>
Here, we have combined two class selectors by ‘+’ symbol. The selector .highlight + .info targets the element with the class attribute value ‘info’ that immediately follows the div element with the class attribute value ‘highlight’. Only the first paragraph with the class attribute value ‘info’ following the highlight class div will be styled with blue color and bold font weight.
Example 7: Combining with Attribute Selector
<!DOCTYPE html>
<html>
<head>
<title>Combining Adjacent Sibling Selector with Attribute Selector</title>
<style>
[data-info="true"] + p {
border: 2px solid red;
padding:20px;
}
</style>
</head>
<body>
<div data-info="true">Div with data-info attribute.</div>
<p>Paragraph after data-info div element.</p>
<p>Another paragraph.</p>
</body>
</html>
In this example, we have combined the adjacent sibling selector with attribute selector by ‘+’ sign which will apply CSS rule to the paragraph immediately following the div with the data-info=”true” attribute.
Similarly, you can combine the adjacent sibling selector with other types of selectors, such as ID selectors, pseudo-class selectors, etc. Try it yourself.
Advanced Examples
Let’s take some advanced examples based on the adjacent sibling selector in CSS.
Example 8: Multiple Adjacent Sibling Selectors
<!DOCTYPE html>
<html>
<head>
<title>Multiple Adjacent Sibling Selector</title>
<style>
h2 + p + ul {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Subheading</h2>
<p>Paragraph after subheading.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<p>Another paragraph.</p>
</body>
</html>
In this example, we have combined multiple adjacent sibling selectors by ‘+’ sign. This selector will apply the CSS rule to the ul element immediately following a p element, which in turn follows an h2 element.
Example 9: Nested Adjacent Sibling Selectors
<!DOCTYPE html>
<html>
<head>
<style>
.container h3 + p {
color: green;
font-weight: bold;
}
.container h3 + p + span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h3>Subheading</h3>
<p>Paragraph after subheading.</p>
<span>Span after paragraph.</span>
</div>
</body>
</html>
In this example, we have a nesting of different elements. The selector .container h3 + p will style the paragraph immediately following the h3 element within the div element with class attribute value ‘container’.
Another selector .container h3 + p + span will apply the CSS rule to the span immediately following that the paragraph element within the div element with class attribute value ‘container’.
Example 10:
<DOCTYPE html>
<html>
<head>
<style>
h1 + p {
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>Some content</div>
<p>This paragraph will not be red.</p>
</body>
</html>In this example, the style will not apply to the paragraph element because the adjacent sibling selector only applies styles to an element that is immediately preceded by the specified sibling element. If there’s any other element between them, the styles won’t apply.
In this tutorial, you have learned adjacent sibling selector in CSS through various examples. As well, you learned the different combination of adjacent sibling selector with other types of selectors, such as class selector, attribute selector, etc. I hope that you will have understood the basic syntax to create adjacent sibling selector in CSS and practiced all examples.
