Sử dụng pseudo-class :first-child trong CSS

Sử dụng pseudo-class :first-child để thêm kiểu đặc biệt cho phần tử là con đầu tiên của phần tử khác.

Ví dụ

Thử chạy mã sau để hiểu cách dùng pseudo-class :first-child:

<html>
<head>
  <style>
    div > p:first-child {
      text-indent: 25px;
    }
  </style>
</head>
<body>
  <div>
    <p>Đoạn văn đầu tiên trong div. Đoạn này sẽ được thụt lề</p>
    <p>Đoạn văn thứ hai trong div. Đoạn này sẽ không được thụt lề</p>
  </div>
  <p>Nhưng nó sẽ không khớp với đoạn văn trong HTML này:</p>
  <div>
    <h3>Tiêu đề</h3>
    <p>Đoạn văn đầu tiên bên trong div. Đoạn này sẽ không bị ảnh hưởng.</p>
  </div>
</body>
</html>