CSS 인접 형제 선택자는 요소의 인접 형제를 선택하는 데 사용됩니다. 첫 번째 선택자 바로 다음에 오는 요소만 선택하는 데 사용됩니다.
구문
CSS 인접 형제 선택자의 구문은 다음과 같습니다 -
element + element {
/*declarations*/
} 예시
다음 예제는 CSS 인접 형제 선택자를 보여줍니다. -
<!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> 출력
이것은 다음과 같은 출력을 제공합니다 -
예시
<!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> 출력
이것은 다음과 같은 출력을 제공합니다 -
