Bộ kết hợp

Bộ kết hợp hậu duệ

Bộ kết hợp hậu duệ — được biểu thị bằng ký tự khoảng cách ( ) — kết hợp hai bộ chọn sao cho các phần tử khớp với bộ chọn thứ hai được chọn nếu chúng có phần tử tổ tiên (cha, cha của cha, hoặc cha của cha của cha, v.v.) khớp với bộ chọn đầu tiên. Các bộ chọn sử dụng bộ kết hợp hậu duệ được gọi là bộ chọn hậu duệ.

body article p {
}

Trong ví dụ bên dưới, chúng ta chỉ khớp phần tử <p> bên trong một phần tử có lớp .box.

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

.box p {
  color: red;
}

Bộ kết hợp con

Bộ kết hợp con (>) được đặt giữa hai bộ chọn CSS. Nó chỉ khớp các phần tử khớp với bộ chọn thứ hai là con trực tiếp của các phần tử khớp với bộ chọn đầu tiên. Các phần tử hậu duệ ở cấp thấp hơn trong phân cấp không khớp. Ví dụ, để chỉ chọn các phần tử <p> là con trực tiếp của các phần tử <article>:

article > p {
  /* … */
}

Trong ví dụ tiếp theo, chúng ta có danh sách có thứ tự (<ol>) được lồng bên trong danh sách không có thứ tự (<ul>). Bộ kết hợp con chỉ chọn các phần tử <li> là con trực tiếp của <ul>, và tạo kiểu cho chúng với đường viền trên.

<ul>
  <li>Unordered item</li>
  <li>
    Unordered item
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </li>
</ul>

ul > li {
  border-top: 5px solid red;
}

Trong ví dụ trước, hãy thử xóa > chỉ định bộ chọn là bộ chọn con. Bạn sẽ có bộ chọn hậu duệ, và tất cả các phần tử <li> sẽ có đường viền đỏ.

Bộ kết hợp anh chị em tiếp theo

Bộ kết hợp anh chị em tiếp theo (+) được đặt giữa hai bộ chọn CSS. Nó chỉ khớp các phần tử khớp với bộ chọn thứ hai đứng ngay sau phần tử khớp với bộ chọn đầu tiên. Ví dụ, để chọn tất cả các phần tử <img> đứng ngay sau phần tử <p>:

p + img {
  /* … */
}

Trường hợp sử dụng phổ biến là thực hiện điều gì đó với đoạn văn theo sau tiêu đề, như trong ví dụ bên dưới. Ở đây, chúng ta chọn bất kỳ đoạn nào chia sẻ phần tử cha với <h1>, và đứng ngay sau <h1> đó.

<article>
  <h1>A heading</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Trong ví dụ trước:

1. Thử chèn một phần tử khác như <h2> giữa <h1> và <p>. Bạn sẽ thấy rằng đoạn văn không còn được khớp bởi bộ chọn và do đó không được áp dụng màu nền và màu chữ khi phần tử ở cạnh nhau.
2. Bây giờ hãy sửa đổi bộ chọn h1 + p để kiểu đặc biệt được áp dụng lại cho đoạn đầu tiên.

Bộ kết hợp anh chị em tiếp sau

Nếu bạn muốn chọn các anh chị em của một phần tử ngay cả khi chúng không đứng liền nhau, thì bạn có thể sử dụng bộ kết hợp anh chị em tiếp sau (~). Để chọn tất cả các phần tử <img> đứng bất kỳ nơi nào sau các phần tử <p>, chúng ta làm như sau:

p ~ img {
  /* … */
}

Trong ví dụ bên dưới, chúng ta chọn tất cả các phần tử <p> đứng sau <h1>, và ngay cả khi có một <div> trong tài liệu, <p> đứng sau nó cũng được chọn.

<article>
  <h1>A heading</h1>
  <p>I am a paragraph.</p>
  <div>I am a div</div>
  <p>I am another paragraph.</p>
</article>

body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Kết hợp bộ kết hợp với bộ chọn

Bạn có thể kết hợp bất kỳ bộ chọn nào mà chúng ta đã khám phá trong các bài học trước với các bộ kết hợp để chọn một phần tài liệu của bạn. Ví dụ, để chọn các mục danh sách có class là a là con trực tiếp của <ul>, hãy thử như sau:

ul > li[class="a"] {
}

Tuy nhiên, hãy cẩn thận khi tạo các danh sách lớn các bộ chọn chọn các phần rất cụ thể của tài liệu. Sẽ khó tái sử dụng các quy tắc CSS vì bạn đã làm cho bộ chọn rất cụ thể với vị trí của phần tử đó trong đánh dấu.

Thường tốt hơn là tạo một lớp đơn giản và áp dụng nó cho phần tử đó. Điều đó nói rằng, kiến thức của bạn về bộ kết hợp sẽ rất hữu ích nếu bạn cần tạo kiểu cho thứ gì đó trong tài liệu của mình và không thể truy cập HTML, có thể vì nó được tạo bởi CMS.

Tóm tắt

Đó là tất cả về bộ chọn, hiện tại. Tiếp theo, chúng ta sẽ cung cấp cho bạn một số bài kiểm tra mà bạn có thể sử dụng để kiểm tra mức độ hiểu và ghi nhớ thông tin chúng ta đã cung cấp về bộ chọn CSS.

• Previous
• Overview: Kiến thức cơ bản về CSS
• Next