Chọn tất cả <p> con trực tiếp của <div> với CSS (Child Selector)

Bộ chọn con trực tiếp (Child Selector: >)

Bộ chọn element > element chỉ chọn các phần tử là **con trực tiếp (direct children)** của phần tử cha. Không chọn cháu, chắt, hay các cấp sâu hơn.

Cú pháp

parent > child {
  /* Style cho child trực tiếp của parent */
}

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div > p {
      color: white;
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>Demo Website</h1>
  <h2>Fruits</h2>
  <p>Fruits are good for health.</p> <!-- Không trong div -->
  <div>
    <p>This is demo text.</p> <!-- Con trực tiếp của div -->
    <span>
      <p>Nested in span.</p> <!-- Cháu của div, KHÔNG được chọn -->
    </span>
  </div>
</body>
</html>

Kết quả

Chỉ `

This is demo text.

` được áp dụng style vì nó là con trực tiếp của `<div>`. Các thẻ p khác không khớp.

So sánh: Descendant vs Child Selector

Selector	Tên	Phạm vi
`div p`	Descendant selector (khoảng trắng)	Tất cả p bên trong div (con, cháu, chắt...)
`div > p`	Child selector	Chỉ p là con trực tiếp của div

Khi nào dùng child selector?

Styling menu dropdown: .menu > li (chỉ cấp 1).
Layout grid/flex: .container > .item.
Tránh style rò rỉ vào các component lồng nhau.