Trong CSS, bộ chọn element+element là một sibling combinator. Nó được dùng để tạo kiểu cho một phần tử đứng ngay sau phần tử khác. Nó chỉ chọn phần tử thứ hai nếu nó theo sát phần tử đầu tiên.
Syntax
element1 + element2 {
/* styles */
}element1là phần tử đứng trước.element2là phần tử cần tạo kiểu, nhưng chỉ khi nó đứng ngay sauelement1.
. Tạo Kiểu Cho Văn Bản Sau Tiêu Đề
Áp dụng một kiểu dáng riêng cho đoạn văn bản đầu tiên ngay sau tiêu đề.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h2+p {
color: blue;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h2>Heading</h2>
<p>This paragraph will be styled.</p>
<p>This paragraph will not.</p>
</body>
</html>
<!--Driver Code Ends-->
. Làm Nổi Bật Các Mục Danh Sách Liền Kề
Tạo kiểu khác biệt cho mục danh sách đầu tiên theo sau một mục danh sách khác.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.one+li {
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul>
<li class="one">Item 1</li>
<li>Item 2 (styled differently)</li>
<li>Item 3</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
. Tạo Khoảng Cách Giữa Các Phần Kề Nhau
Chỉ thêm margin cho phần nằm ngay sau một phần khác.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
section+section {
padding: 20px;
border: 2px solid black;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<section>First section</section>
<section>Second section (with extra margin)</section>
</body>
</html>
<!--Driver Code Ends-->
. Định Dạng Các Phần Tử Trong Một Biểu Mẫu
Chọn trường input đầu tiên theo sau một nhãn để tạo kiểu biểu mẫu tốt hơn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
label:focus + input {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="name" tabindex="0">Name:</label>
<input id="name" type="text" />
<input type="submit" value="Submit" />
</body>
</html>
<!--Driver Code Ends-->
. Tùy Chỉnh Các Nút Sau Một Đoạn Văn
Tạo kiểu khác cho các nút khi chúng đứng ngay sau một đoạn văn.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p+button {
background-color: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>Click below to proceed:</p>
<button>Proceed</button>
</body>
</html>
<!--Driver Code Ends-->
. Cải Thiện Các Chỉ Báo Khả Năng Truy Cập
Thêm kiểu đặc biệt vào các biểu tượng hoặc chỉ báo ngay sau tiêu đề để tăng khả năng truy cập.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h1:active+.icon {
font-size: 1.5em;
background-color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 tabindex="0">Main Title</h1>
<span class="icon">🔊</span>
</body>
</html>
<!--Driver Code Ends-->
. Tạo Kiểu Cho Các Input Tương Ứng Với Nhãn Của Chúng
Mỗi nhãn được liên kết với một trường input tương ứng. Bạn có thể dùng bộ chọn + (adjacent sibling selector). Mục đích là tạo kiểu cho các trường input cho nhãn tương ứng.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
label:active+input {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="name" class="one">Label for input-1:</label>
<input type="text" id="name">
<br>
<br>
<label for="classes" class="one">Label for input-2:</label>
<input type="text" id="classes">
<br>
<br>
<label for="gender" class="one">Label for input-3:</label>
<input type="text" id="gender">
</body>
</html>
<!--Driver Code Ends-->