Vai trò bộ chọn :first-child trong CSS

Bộ chọn :first-child

:first-child chọn phần tử là **con đầu tiên** của phần tử cha, **bất kể loại phần tử**.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:first-child {
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>Tiêu đề</h1>
  <p>Đoạn 1: Con đầu tiên của body? KHÔNG (h1 là con đầu tiên) - Không nền</p>
  <div>
    <p>Đoạn 2: Con đầu tiên của div - CÓ nền cam</p>
    <p>Đoạn 3: Không phải con đầu tiên - Không nền</p>
  </div>
</body>
</html>

Khác với :first-of-type: :first-child yêu cầu phần tử phải là con **đầu tiên tuyệt đối** của cha. Ở body, h1 là con đầu tiên nên p không khớp.