CSS How to Use CSS Selectors to Modify the Properties of Sibling Elements

In this article, we’ll explain how to use CSS selectors to modify the properties of sibling elements and how to apply this knowledge in practical examples. By properly applying CSS selectors, we can easily modify the styles of specific sibling elements to achieve various visual effects and interactive behaviors.

Read more: CSS Tutorial

Sibling Selectors

Sibling selectors in CSS are a powerful tool that combines pseudo-classes with relational selectors. Sibling selectors allow you to select sibling elements of the current element and modify their properties based on their specific state or position. :focus is a commonly used pseudo-class selector for selecting the currently focused element.

For example, suppose we have a tabbed layout consisting of buttons and corresponding content. We hope that when a tab button is clicked, the corresponding tab content will be displayed. We can easily achieve this function through CSS selectors.

The HTML structure is as follows:

<div class="tab-container"> 
<button class="tab-button">Tab 1</button> 
<button class="tab-button">Tab 2</button> 
<button class="tab-button">Tab 3</button> 

<div class="tab-content">Content 1</div> 
<div class="tab-content">Content 2</div> 
<div class="tab-content">Content 3</div> 
</div> 

We can use the sibling selector and the :focus pseudo-class to select the currently focused tab button, and then show or hide the tab content by modifying the corresponding sibling elements. The corresponding CSS code is as follows:

.tab-button:focus + .tab-content {
display: block;
}

In the above code, we use the selector .tab-button:focus + .tab-content to select the sibling element .tab-content of the currently focused tab button. Then, by setting the property display: block;, we display the corresponding tab content.

This method allows us to easily implement a tabbed layout and dynamically display the corresponding content when the user clicks a different tab button.

Using Hierarchical Selectors to Modify Sibling Element Properties

In addition to sibling selectors, CSS provides several hierarchical selectors that can be used to select children, parents, and other hierarchical elements. By flexibly using these selectors, we can further modify the properties of sibling elements.

For example, we can use the child selector to select specific child elements under a parent element and modify their styles. The HTML structure is as follows:

<div class="container">
<h2>Title</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>

If we want to modify the style of the first <p> element following the <h2> element, we can use a combination of child and sibling selectors to achieve this. The corresponding CSS code is as follows:

.container > h2 + p {
color: red;
}

In the above code, > represents a child selector, and h2 + p selects the <p> element immediately following the <h2> element. By setting the color: red; property, we can change the text color of the first <p> element to red.

By leveraging hierarchical selectors, we can more flexibly select sibling elements to modify and perform various style adjustments.

Example: Modifying the Background Color of Adjacent Elements

In actual development, we often need to modify the styles of adjacent elements based on user behavior. Take the mouse hover effect as an example. When the mouse hovers over an element, we want to modify the background color of its adjacent elements. We can easily achieve this effect through CSS selectors.

The HTML structure is as follows:

<div class="container"> 
<div class="box">Box 1</div> 
<div class="box">Box 2</div> 
<div class="box">Box 3</div> 
<div class="box">Box 4</div> 
</div> 

The corresponding CSS code is as follows:

.box:hover + .box {
background-color: yellow; 
} 

In the above code, we use the :hover pseudo-class selector to select the text currently being hovered over, and then use the sibling selector .box:hover + .box to select the adjacent element. By setting the property background-color: yellow;, we can change the background color of adjacent elements to yellow.

Using this method, we can add various interactive effects to web pages and enhance the user experience.

Summary

This article introduced how to use CSS selectors to modify the properties of sibling elements. By using sibling selectors and hierarchical selectors, we can easily select and modify the styles of specific sibling elements. Through practical examples, we saw how these selectors can be used to create various visual effects and interactive behaviors. Mastering the use of CSS selectors allows us to better control the layout and style of web pages, enhancing the user experience.

We hope this article has helped you understand the use and application of CSS selectors. We also hope that you can flexibly apply this knowledge in real-world development to create even more outstanding web page effects.