Định nghĩa và sử dụng
- ":first-of-type" chọn thành phần con đầu tiên hoặc duy nhất trong các thành phần cha.
Cấu trúc
:first-of-type { property: value; }
Ví dụ
HTML viết:
<html> <head></head> <body> <p>p tự do đầu tiên</p> <div> <ul> <li> <p>p duy nhất của li</p> </li> <li> <p>p duy nhất của li</p> </li> </ul> <p>p đầu tiên của div</p> <p>p thứ 2 của div</p> <ul> <li> <p>p đầu tiên của li</p> <p>p cuối cùng của li</p> </li> </ul> <p>p thứ 3 của div</p> <p>p cuối cùng của div</p> </div> <p>p tự do thứ 2</p> <p>p tự do cuối cùng</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
p tự do đầu tiên
-
p duy nhất của li
-
p duy nhất của li
p đầu tiên của div
p thứ 2 của div
-
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
p tự do thứ 2
p tự do cuối cùng
CSS viết:
p:first-of-type{ color: blue; }
Hiển thị trình duyệt khi đã có css:
p tự do đầu tiên
-
p duy nhất của li
-
p duy nhất của li
p đầu tiên của div
p thứ 2 của div
-
p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
p tự do thứ 2
p tự do cuối cùng
Ta thấy những thành phần <p> ở vị trí đầu tiên hoặc duy nhất của các thành phần cha đã được chọn.
Trình duyệt hỗ trợ
":first-of-type" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.