CSS selector to get the previous element
CSS Selector Get Previous Element
In CSS, we often need to use selectors to get elements and set their styles. Sometimes we need to select the element immediately preceding a given element, requiring specialized selectors. This article details how to use CSS selectors to retrieve the previous element, providing several code examples to help you better understand.
1. Adjacent Sibling Selector
The adjacent sibling selector is used to select the next sibling of a specified element. This is achieved by placing a plus sign (+) between two elements.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adjacent Sibling Selector Example</title>
<style>
p + div {
color: red;
}
</style>
</head>
<body>
<p>geek-docs.com</p>
<div>This is the previous element</div>
</body>
</html>
Output:
In the example above, we use the adjacent sibling selector p + div to select the <div> element and then set its text color to red. This achieves the effect of selecting the previous element.
2. General Sibling Selector
The General Sibling Selector selects all sibling elements following a specified element. Use the tilde (~) between two elements to select the previous element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Sibling Selector Example</title>
<style>
p ~ div {
font-weight: bold;
}
</style>
</head>
<body>
geek-docs.com
<div>This is the previous element</div>
<span>This is another sibling element</span>
</body>
</html>
Output:
In the example above, we use the universal sibling selector p ~ div to select all <div> elements following the <p> element and set a bold font style for them.
3. :nth-last-child Pseudo-Class Selector
The :nth-last-child pseudo-class selector is used to select the nth-to-last child element of a parent element. By combining :nth-last-child and :nth-child, you can achieve the same effect as selecting the previous element.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-last-child Pseudo-class Selector Example</title>
<style>
p:nth-last-child(2) {
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p>geek-docs.com</p>
<p>This is the previous element</p>
<p>This is another element</p>
</div>
</body>
</html>
Output:
In the above example, we use :nth-last-child(2) to select the second-to-last <p> element in the parent element and set the underline style to it.
4. :not pseudo-class selector
The :not pseudo-class selector is used to select all elements except the specified element. By combining :not and :nth-last-child, you can achieve the effect of selecting the previous element.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:not Pseudo-class Selector Example</title>
<style>
p:not(:last-child) {
color: blue;
}
</style>
</head>
<body>
<div>
<p>geek-docs.com</p>
<p>This is the previous element</p>
<p>This is another element</p>
</div>
</body>
</html>
Output:
In the example above, we use :not(:last-child) to select all <p> elements except the last one and set their text color to blue.
5. :empty Pseudo-Class Selector
The :empty pseudo-class selector is used to select elements with no children. By combining :empty with :nth-last-child, you can achieve the same effect as selecting the previous element.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:empty Pseudo-class Selector Example</title>
<style>
p:empty {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>geek-docs.com</p>
<p></p>
<p>This is another element</p>
</div>
</body>
</html>
Output:
In the example above, we use :empty to select the <p> element with no child elements and set a yellow background color.