Bộ chọn phần tử anh em tổng quát

Bài học 10 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Trong bài học này, chúng ta sẽ tìm hiểu về bộ chọn anh em tổng quát, một cách hiệu quả để chọn và định kiểu cho các phần tử có cùng phần tử cha và nằm sau một phần tử cụ thể.

Bộ chọn anh em tổng quát cho phép bạn chọn các phần tử có cùng phần tử cha và xuất hiện sau một phần tử nhất định. Bộ chọn này được ký hiệu bằng dấu ngã (~).

Cú pháp:

element ~ target-element {
    /* Các kiểu dáng áp dụng cho target-element */
}

Ví dụ:

HTML:

<div class="box"></div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div class="highlight"></div>
<p>Paragraph 4</p>

CSS:

.box ~ p {
    color: gray;
}

Trong ví dụ trên, tất cả phần tử <p> xuất hiện sau phần tử <div class="box"> sẽ có màu văn bản là màu xám. Bộ chọn anh em tổng quát (~) chọn và định kiểu cho các phần tử <p> tiếp theo sau phần tử <div> được chỉ định.

Thử thách

Dễ

Dựa trên cấu trúc HTML, hãy áp dụng một màu nền riêng cho tất cả phần tử <h3> đứng sau phần tử <h2>.

Tự làm thử


<html>
<head>
  <title>General Sibling Selector Exercise</title>
  <style>
    
  </style>
</head>
<body>
  <div class="content">
    <h2>Introduction</h2>
    <p>Content goes here...</p>
    <h3>Subsection 1</h3>
    <p>More content...</p>
    <h3>Subsection 2</h3>
    <p>Even more content...</p>
</div>
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớp Bộ chọn ID Bộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kềBộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web