Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Tạo kiểu cho p là con thứ 2 của cha với CSS

Bộ chọn :nth-child(n)

:nth-child(n) chọn phần tử là **con thứ n tuyệt đối** của cha (tính tất cả loại con). Khác với :nth-of-type chỉ đếm cùng loại.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:nth-child(4) {
      background: orange;
      color: white;
    }
  </style>
</head>
<body>
  <p>Văn bản 1</p>
  <p>Văn bản 2</p>
  <p>Văn bản 3</p>
  <p>Văn bản 4 - CÓ nền cam (con thứ 4 của body)</p>
  <p>Văn bản 5</p>
  <p>Văn bản 6</p>
</body>
</html>

Con thứ 4 của body là "Văn bản 4" (tính cả h1 nếu có, nhưng ở đây chỉ có p) → nền cam. Nếu body có <h1> đầu tiên, thì "Văn bản 3" sẽ là con thứ 4.