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

Tạo kiểu cho p là phần tử p thứ n của cha với CSS

Bộ chọn :nth-of-type(n)

:nth-of-type(n) chọn phần tử là con thứ n **của loại phần tử đó** trong cha. Chỉ đếm các phần tử cùng loại.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:nth-of-type(2) {
      background: yellow;
    }
  </style>
</head>
<body>
  <p>Văn bản 1</p>
  <p>Văn bản 2 - CÓ nền vàng (p thứ 2)</p>
  <p>Văn bản 3</p>
  <p>Văn bản 4</p>
</body>
</html>

"Văn bản 2" là thẻ p thứ 2 trong body → nền vàng. Nếu có div can giữa, vẫn chỉ đếm p.