CSS Previous Element

CSS previous element

In CSS, we often need to style the previous element, such as adding special styles or hiding it. This article will detail how to use CSS selectors to select the previous element and provide some example code to help readers better understand.

1. Selecting the Previous Element Using CSS Selectors

In CSS, we can use several selectors to select the previous element. The most commonly used selectors are the + selector and the ~ selector. The difference between these two selectors is that the + selector only selects the immediately preceding element, while the ~ selector selects all preceding elements.

1.1 Use the `+` selector to select the previous element.

+ selectors are used to select the immediately preceding element. The sample code is as follows:

<!DOCTYPE html>
<html> Tutorial">html> 
<head> 
<style> 
p + span { 
color: red; 
} 
</style> 
</head> 
<body> 
<p>This is a paragraph</p> 
<span>This is a span element</span> 
</body> 
</html>

Code running results:

CSS Previous Element

In the example code above, we use the p + span selector to select the immediately preceding “element” and set its text color to red.

1.2 Use the `~` selector to select the previous element.

~ selector is used to select all preceding elements. The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
p ~ span {
font-weight: bold;
}

</style>

</head>
<body>
<p>This is the first paragraph
<div>This is a div element</div>
<span>This is the first span element</span>
<span>This is the second span element</span>
</body>
</html>

Code execution result:

CSS previous element

In the above code example, we use the p ~ span selector to select all preceding ” elements and set their font style to bold.

2. Example Code

The following provides some more specific example code to help readers better understand how to use CSS selectors to select the previous element.

2.1 Select the previous element and set its background color

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p + div { 
background-color: lightblue; 
} 
</style> 
</head> 
<body> 
<p>This is a paragraph</p> 
<div>This is a div element</div> 
</body> 
</html>

Code execution results:

CSS Previous Element

In the example code above, we use the p + div selector to select the immediately preceding <p> element and set a light blue background color for it.

2.2 Select the previous element and hide it.

<!DOCTYPE html>
<html>
<head>
<style>
p + span {
display: none;
}

</style>
</head>
<body>
<p>This is a paragraph.</p>
<span>This is a span element.</span>
</body>
</html>

Code run result:

CSS Previous Element

In the example code above, we use p + The selector selects the immediately preceding <p> element and hides it.

2.3 Select the preceding element and set the font size

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p ~ span { 
font-size: 20px; 
} 
</style> 
</head> 
<body> 
<p>This is the first paragraph 
<span>This is the first span element </span> 
<span>This is the second span element </span> 
</body> 
</html>

Code execution result:

CSS previous element

In the example code above, we use the p ~ span selector to select all preceding <p> elements and set a font size of 20px for each.

3. Summary

Through this article, readers should have learned how to use CSS selectors to select the previous element and have mastered some common code examples. In actual development, we can choose appropriate selectors based on specific needs and style the previous element, achieving more flexible and diverse page effects.