CSS Get Previous Sibling
Getting the Previous Sibling with CSS
In CSS, we often need to style or manipulate the previous sibling of an element. This article will detail how to use CSS selectors to get the previous sibling element and provide several sample code examples to demonstrate its application in different scenarios.
1. Using the Tilde (~) Selector
The tilde (~) selector selects all sibling elements following a specified element. By combining the tilde selector with the :last-child pseudo-class, we can access the previous sibling element.
/* Select the previous sibling element */
.element ~ .element {
/* Style settings */
color: red;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get Previous Sibling</title>
<style>
.element {
color: blue;
}
.element ~ .element {
color: red;
}
</style>
</head>
<body>
<div class="element">geek-docs.com</div>
<div class="element">Hello</div>
<div class="element">World</div>
</body>
</html>
Output:
Result: The text color of the second and third .element elements changes to red.
2. Using the Adjacent Sibling Selector (+)
The adjacent sibling selector (+) selects the first sibling element after the specified element. By combining the adjacent sibling selector with the :last-child pseudo-class, we can get the previous sibling element.
/* Select the previous sibling element */
.element + .element {
/* Style settings */
font-weight: bold;
}
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get Previous Sibling</title>
<style>
.element {
color: blue;
}
.element + .element {
font-weight: bold;
}
</style>
</head>
<body>
<div class="element">geek-docs.com</div>
<div class="element">Hello</div>
<div class="element">World</div>
</body>
</html>
Output:
Result: The text of the second .element element is bold.
3. Get Previous Sibling Element Using JavaScript
In addition to CSS selectors, we can also use JavaScript to get the previous sibling element. Using the previousElementSibling property, we can easily get an element’s previous sibling.
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Get Previous Brother</title>
<style>
.element {
color: blue;
}
.highlight {
color: red;
}
</style>
</head>
<body>
<div class="element">geek-docs.com</div>
<div class="element">Hello</div>
<div class="element">World</div>
<script>
const elements = document.querySelectorAll('.element');
elements.forEach(element => {
const prevSibling = element.previousElementSibling;
if (prevSibling) {
prevSibling.classList.add('highlight');
}
});
</script>
</body>
</html>
Output:
Result: The text color of the previous sibling element of the first .element element changes to red.
Through the above sample code, we can see the effects of different methods for accessing the previous sibling element.