The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector.
Syntax
The syntax for CSS adjacent sibling selector is as follows −
element + element {
/*declarations*/
}Example
The following examples illustrate CSS adjacent sibling selector −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8px;
height: 50px;
width: 60px;
display: flex;
float: left;
border-radius: 5%;
border: 2px solid brown;
box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
border-radius: 50%;
background-color: orchid;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<div></div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 1.5em;
}
span {
background-color: lavender;
}
span + span {
background-color: darkseagreen;
}
</style>
</head>
<body>
<p>
<span>Demo text</span> <span>goes here</span>
</p>
</body>
</html>Output
This gives the following output −
