:only-child

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

  • ":only-child" Chọn thành phần con trong các thành phần cha, khi thành phần cha có mỗi thành phần con là chính nó, không được chứa thành phần con khác.
  • Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.

Thành phần con duy nhất không chứa thành phần con khác 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-child {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>p tự do duy nhất</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, không chứa thành phần khác</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>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

p tự do duy nhất

  • p duy nhất của li

    div duy nhất của li
  • p duy nhất của li, không chứa thành phần khác

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

CSS viết:

p:only-child{
    color: blue;
}

Hiển thị trình duyệt khi đã có css:

p tự do duy nhất

  • p duy nhất của li

    div duy nhất của li
  • p duy nhất của li, không chứa thành phần khác

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

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, thành phần cha không chứa thành phần khác ngoài nó.

Trình duyệt hỗ trợ

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

":only-child" đượ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.

THÔNG BÁO LỖI