Đị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
$(':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.