:nth-child(n)

Đăng bởi: Admin

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

Bộ chọn :nth-child(n): chọn thành phần thứ "n" trong thành phần cha, gốc tính được tính từ thành phần đầu tiên trở đi.
Thứ tự "n" được tính cho tất cả các thành phần cùng cấp.
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.
Giá trị "n" có thể là số hoặc một hàm (function).

Cấu trúc

Đã được thêm vào từ phiên bản 1.1.4

$(':nth-child(n)')

$('tag:nth-child(n)')

Ví dụ

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p:nth-child(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<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>

<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>
</body>
</html>

Hiển thị trình duyệt:

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

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!