Adjacent Sibling Selectors in CSS

CSSWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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

 Live Demo

<!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 −

raja
Published on 08-Jan-2020 12:46:20
Advertisements