Trong CSS, general sibling selector (~) là một combinator mạnh mẽ. Selector này được dùng để nhắm mục tiêu các phần tử cùng cấp với một phần tử chỉ định. Các phần tử này phải xuất hiện sau nó trong DOM tree. Khác với adjacent sibling selector (+), nó chỉ nhắm mục tiêu phần tử liền kề. General sibling selector áp dụng cho tất cả các phần tử cùng cấp phù hợp. Chúng phải xuất hiện sau phần tử đã chỉ định.
Cú pháp
element1 ~ element2 {
/* styles */
}
- element1 là phần tử tham chiếu.
- element2 sẽ được tạo kiểu nếu nó xuất hiện sau element1 trong cùng một phần tử cha.
. Làm nổi bật tất cả các phần tử cùng cấp sau một phần tử có thể nhấp.
Sử dụng general sibling selector để tạo kiểu cho các phần tử theo sau một nút hoặc liên kết cụ thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.child-btn:hover~.highlight {
background-color: burlywood;
font-size: 23px;
color: white;
font-family: sans-serif;
font-weight: 900;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="parent">
<button class="child-btn">Highlight All Below</button>
<p class="highlight">Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p class="highlight">Paragraph 3</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Áp dụng hiệu ứng accordion hoặc hiệu ứng toggle cho bất kỳ phần tử nào.
Tạo một accordion menu đơn giản. Khi nhấp vào một tiêu đề, nó sẽ bật tắt hiển thị của nội dung tiếp theo.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.accordion-content {
display: none;
}
.accordion-heading:focus~.accordion-content {
display: block;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="accordion">
<h3 class="accordion-heading" tabindex="0">Section 1</h3>
<p class="accordion-content">Content for section 1.</p>
<h3 class="accordion-heading" tabindex="0">Section 2</h3>
<p class="accordion-content">Content for section 2.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu cho danh sách động
Áp dụng các kiểu cho các mục danh sách một cách linh động dựa trên vị trí của một mục cụ thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.start-point~li {
color: red;
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul class="dynamic-list">
<li>Item 1</li>
<li class="start-point">Start styling here</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
. Đánh dấu các trường bắt buộc sau một nhãn
Các trường nhập liệu liên tiếp sau bất kỳ nhãn nào có thể được tạo kiểu bằng general sibling selector.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.required-label~.input-field {
border: 2px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="form">
<label class="required-label">Required Fields:</label>
<input type="text" class="input-field" placeholder="Name">
<input type="email" class="input-field" placeholder="Email">
<input type="password" class="input-field" placeholder="Password">
</div>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu cho ghi chú hoặc cảnh báo sau một tiêu đề
General sibling selector giúp tạo kiểu cho tất cả các ghi chú và cảnh báo sau một tiêu đề cụ thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
h2~.note {
border-left: 4px solid orange;
padding-left: 10px;
font-style: italic;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="notes-section">
<h2>Important Information</h2>
<p class="note">Note 1: Read the instructions carefully.</p>
<p class="note">Note 2: Double-check your work.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu cho các input sau một label cụ thể
General sibling selector giúp tạo kiểu cho tất cả các input sau một label cụ thể.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.main:focus~.one {
outline: 3px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<label for="" class="main" tabindex="0">Click me to style input:</label>
<input type="text" class="one">
<input type="text" class="one">
<input type="text" class="one">
</body>
</html>
<!--Driver Code Ends-->