Bộ chọn anh chị em liền kề CSS được sử dụng để chọn anh chị em kế cận của một phần tử. Nó chỉ được sử dụng để chọn những phần tử ngay sau bộ chọn đầu tiên.
Cú pháp
Cú pháp cho bộ chọn anh chị em liền kề CSS như sau -
element + element {
/*declarations*/
} Ví dụ
Các ví dụ sau minh họa bộ chọn anh chị em liền kề 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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
