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

Tạo kiểu cho p là p duy nhất của cha với CSS

Bộ chọn :only-of-type

:only-of-type chọn phần tử là **con duy nhất của loại phần tử đó** trong cha. Cha có thể có con khác loại, nhưng chỉ có 1 con loại này.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:only-of-type {
      background: orange;
      color: white;
    }
  </style>
</head>
<body>
  <div>
    <p>Văn bản 1 - CÓ nền cam (p duy nhất trong div này)</p>
  </div>
  <div>
    <p>Văn bản 2 - Không nền</p>
    <p>Văn bản 3 - Không nền</p>
    <p>Văn bản 4 - Không nền</p>
  </div>
</body>
</html>

Div 1: chỉ có 1 thẻ p → "Văn bản 1" khớp → nền cam. Div 2: có 3 thẻ p → không ai khớp. Khác với :only-child yêu cầu con duy nhất tuyệt đối.