Bộ chọn con trong CSS

Giả sử chúng ta có đoạn mã sau:

html<p>
  văn bản <b><i>in đậm và in nghiêng</i></b>
</p>
<p>
  văn bản <i>chỉ in nghiêng</i>
</p>

Giả sử chúng ta muốn chọn tất cả các thẻ i, là phần tử con cháu của các đoạn văn. Hãy làm điều đó:

cssp i {
  color: red;
}

Kết quả thực thi mã:

Bây giờ hãy chọn các thẻ i, là phần tử con trực tiếp của các đoạn văn của chúng ta. Bộ chọn con > sẽ giúp chúng ta việc này.

Để hiểu cách sử dụng nó, hãy so sánh nó với bộ chọn phần tử con cháu. Như thế này: p i - chúng ta sẽ chọn tất cả các phần tử in nghiêng bên trong các đoạn văn, còn như thế này: p > i - chỉ các phần tử in nghiêng là phần tử con trực tiếp của các đoạn văn.

Hãy áp dụng bộ chọn này vào mã HTML của chúng ta:

cssp > i {
  color: red;
}

Kết quả thực thi mã:

html<ul>
  <li>
    <i>in nghiêng</i>
    <b>in đậm</b>
    <b><i>in đậm và nghiêng</i></b>
  </li>
  <li>
    <i>in nghiêng</i>
    <b>in đậm</b>
    <b><i>in đậm và nghiêng</i></b>
  </li>
</ul>