Bộ :first-of-typechọn trong CSS cho phép bạn nhắm mục tiêu lần xuất hiện đầu tiên của một phần tử trong vùng chứa của nó. 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ới tiêu đề và một số đoạn văn:
Paragraph 1.
Paragraph 2.
Paragraph 3.
Chúng tôi muốn làm cho đoạn đầu tiên lớn hơn, như là một loại “lede” hoặc đoạn giới thiệu. Thay vì cho nó một lớp, chúng ta có thể sử dụng :first-of-typeđể chọn nó:
p:first-of-type ( font-size: 1.25em; )Cách sử dụng :first-of-typerất giống với :nth-childnhưng có một điểm khác biệt quan trọng: nó ít cụ thể hơn. Trong ví dụ trên, nếu chúng ta đã sử dụng p:nth-child(1), sẽ không có gì xảy ra vì đoạn văn không phải là con đầu tiên của cha mẹ của nó (the ). Điều này cho thấy sức mạnh của :first-of-type: nó nhắm mục tiêu đến một loại phần tử cụ thể trong một sắp xếp cụ thể có mối quan hệ với các anh chị em tương tự, không phải tất cả các anh chị em.
Ví dụ đầy đủ hơn bên dưới minh họa việc sử dụng :first-of-typevà một bộ chọn lớp giả có liên quan :last-of-type,.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | 3.2+ | Làm | 9.5+ | 9+ | Làm | Làm |
:first-of-typeđã đượ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ị.