CSS Adjacent Sibling Selector (+): Bộ chọn anh em liền kề

Bộ chọn anh em liền kề (adjacent sibling selector) trong CSS được dùng để chọn phần tử anh em ngay sau một phần tử. Chỉ chọn những phần tử theo ngay sau bộ chọn đầu tiên.

Cú pháp

element + element {
    /* declarations */
}

Chỉ chọn phần tử thứ hai nếu nó liền kề (không có phần tử nào khác giữa chúng) và cùng cha.

Ví dụ 1: Style div liền kề

<!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> <!-- Ngắt liên kết adjacent -->
<div></div>
<div></div> <!-- Div này được style (liền kề div trước) -->
</body>
</html>

Kết quả: Div đầu tiên vuông viền nâu. Div thứ 2 (sau <hr>) không bị style vì không liền kề. Div thứ 3 (liền kề div 2) được style: tròn, nền orchid.

Ví dụ 2: Style span liền kề

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

Kết quả: Span đầu tiên nền lavender, span thứ hai (liền kề) nền darkseagreen.

So sánh: Adjacent (+) vs General Sibling (~)

Ứng dụng thực tế

/ * Khoảng cách giữa các phần tử liên tiếp */
p + p { margin-top: 1em; }

/ * Style cho input ngay sau label */
label + input { margin-left: 0.5rem; }

/ * Ẩn label khi input focus (float label pattern) */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    transform: translateY(-1.5em) scale(0.85);
}

/ * Divider giữa các item */
li + li::before {
    content: "";
    display: block;
    height: 1px;
    background: #eee;
    margin: 0.5rem 0;
}