Tạo kiểu cho phần tử p đầu tiên của cha với CSS

Bộ chọn :first-of-type

:first-of-type chọn phần tử là **con đầu tiên của loại phần tử đó** trong phần tử cha.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:first-of-type {
      background: orange;
    }
  </style>
</head>
<body>
  <p>Đoạn văn bản 1 - Có nền cam (p đầu tiên)</p>
  <p>Đoạn văn bản 2 - Không có nền</p>
  <div>
    <p>Đoạn 3 trong div - CÓ nền cam (p đầu tiên của div)</p>
    <p>Đoạn 4 trong div - Không có nền</p>
  </div>
</body>
</html>

Áp dụng riêng cho từng cha: body có p đầu tiên là "Đoạn 1", div có p đầu tiên là "Đoạn 3". Cả hai đều có nền cam.