:only-of-type

Định nghĩa và sử dụng

  • ":only-of-type" chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
  • Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ 2 trở lên.

Thành phần con duy nhất có thể là:

<div>
    <p></p>
</div>

<div>
    <p></p>
    <ul>
        <li></li>
    </ul>
</div>

<div>
    <p></p>
    <p></p>
</div>

Ghi chú: Màu xanh là màu được chọn.

Cấu trúc

:only-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>
            <div>div duy nhất của li</div>
        </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

    div 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:only-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

    div 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> được chọn đều là thành phần duy nhất có trong thành phần cha.

Trình duyệt hỗ trợ

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

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