CSS select sibling elements

CSS Select Sibling Elements

What are sibling elements?

In HTML, sibling elements are elements at the same level, that is, they have the same parent element. For example, the following HTML Structure:

<div>
<p>First p element</p>
<p>Second p element</p>
<h1>h1 element</h1>
</div>

In this example, First p element and Second p element are sibling elements and have the same parent element, <div>.

How to Select Sibling Elements

In CSS, we can use adjacent sibling selectors and general sibling selectors to select sibling elements.

Sibling Selectors

The sibling selector is used to select the sibling elements immediately following a specified element. It is represented by the + notation. For example, to select all  elements immediately following the first  element in the HTML structure above, we can write:

p + p {
/* CSS style */
}

This selector selects all  elements immediately following the  element, that is, all  elements following the first  element. This method allows you to select sibling elements.

Universal Sibling Selector

The universal sibling selector is used to select all sibling elements following a specified element. It is represented by the ~ notation. For example, if we want to select all sibling elements following the first  element in the HTML structure above, we can write it like this:

p ~ p {
/* CSS style */
}

This selector selects all  elements following the  element, that is, all sibling elements following the first  element. Using the universal sibling selector, we can select all elements at the same level, not just the immediately following sibling elements.

Sample Code and Runtime Results

To better understand how to select sibling elements, we use a sample code to demonstrate how to use the sibling selector and the universal sibling selector.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>CSS Selecting Sibling Elements Example</title> 
<style> 
p {
color: red; 
} 
p + p {
color: blue; 
} 
p ~ p {
color: green; 
} 
</style> 
</head> 
<body> 

<div> 
<p>First p element 
Second p element 
<h1>h1 element</h1> 
Third p Elements

</div>

</body>

</html>

In this example code, we define three  elements and one <h1> element, assigning them different color styles using sibling selectors and universal sibling selectors. The first  element is colored red, the next sibling  element is colored blue, and all  elements at the same level are colored green.

When we run this code in a browser, we can see that the different colors of the  elements represent the effects of different selectors, providing a more intuitive understanding of how to select sibling elements.

Summary

Through this article, we’ve learned how to select sibling elements in CSS, using sibling selectors and universal sibling selectors. Sibling selectors are used to select the sibling elements immediately following a specified element, while universal sibling selectors are used to select all sibling elements of the same level following a specified element. Flexible use of these selectors can help us better design page styles and enhance the user experience.