:first-of-type

Đị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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

":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.