:last-child

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

  • ":last-child" chọn thành phần cuối cùng của thành phần cha.
  • 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.

Cấu trúc

:last-child {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>
</body>
</html>

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

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

CSS viết:

p:last-child{
    color: blue;
}

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

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Ta thấy những thành phần <p> ở vị trí cuối cùng có thành phần cha đều đã được chọn.

Trình duyệt hỗ trợ

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

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