Bộ :first-childchọn cho phép bạn nhắm mục tiêu phần tử đầu tiên ngay lập tức bên trong phần tử khác. Nó được định nghĩa trong thông số kỹ thuật CSS Selectors Level 3 là “lớp giả cấu trúc”, có nghĩa là nó được sử dụng để tạo kiểu nội dung dựa trên mối quan hệ của nó với nội dung chính và anh chị em.
Giả sử chúng ta có một bài báo và muốn làm cho đoạn đầu tiên lớn hơn - giống như một “lede” hoặc một đoạn văn bản giới thiệu:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Thay vì cho nó một lớp (ví dụ .first), chúng ta có thể sử dụng :first-childđể chọn nó:
p:first-child ( font-size: 1.5em; )Cách sử dụng :first-childrất giống với :first-of-typenhưng có một điểm khác biệt quan trọng: nó ít cụ thể hơn. :first-childsẽ chỉ cố gắng so khớp với phần tử con đầu tiên ngay lập tức của một phần tử mẹ, trong khi first-of-typesẽ khớp với lần xuất hiện đầu tiên của một phần tử được chỉ định, ngay cả khi nó không hoàn toàn xuất hiện đầu tiên trong HTML. Trong ví dụ trên, kết quả sẽ giống nhau, chỉ vì phần tử con articleđầu tiên của pphần tử đầu tiên cũng xảy ra . Điều này cho thấy sức mạnh của :first-child: nó có thể xác định một phần tử có mối quan hệ với tất cả anh chị em của nó, không chỉ anh chị em cùng loại.
Ví dụ đầy đủ hơn bên dưới minh họa việc sử dụng :first-childvà một bộ chọn lớp giả có liên quan :last-child,.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | 3.2+ | Bất kì | 9.5+ | 9+ | Bất kì | Bất kì |
:first-childđã được giới thiệu trong Mô-đun 3 của Bộ chọn CSS, có nghĩa là các phiên bản cũ của trình duyệt không hỗ trợ nó. Tuy nhiên, hỗ trợ trình duyệt hiện đại là hoàn hảo và các bộ chọn giả mới được sử dụng rộng rãi trong môi trường sản xuất. Nếu bạn yêu cầu hỗ trợ trình duyệt cũ hơn, hoặc polyfill cho IE hoặc sử dụng các bộ chọn này theo những cách không quan trọng, đó là cải tiến liên tục, được khuyến nghị.