Trong CSS, các pseudo-classes nth-child() và nth-of-type() đều được sử dụng để chọn các phần tử dựa trên vị trí của chúng trong cây DOM. Tuy nhiên, chúng có những điểm khác biệt quan trọng trong cách hoạt động và ứng dụng. Bài viết này sẽ giải thích chi tiết về sự khác biệt giữa hai pseudo-class này.
nth-child()nth-child() là một pseudo-class cho phép bạn chọn phần tử con dựa trên vị trí của nó trong cha mẹ, không phân biệt loại phần tử. Cú pháp của nth-child() như sau:
selector:nth-child(n)
Trong đó:
n có thể là một số, công thức (như 2n, 2n+1), hoặc từ khóa (odd, even).<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
li:nth-child(2) {
color: red; /* Chọn li thứ 2 */
}
Trong ví dụ trên, phần tử <li> thứ 2 (Item 2) sẽ được chọn và đổi màu thành đỏ.
nth-of-type()nth-of-type() là một pseudo-class tương tự, nhưng nó chỉ chọn phần tử dựa trên loại của nó (tag name) trong cha mẹ. Cú pháp của nth-of-type() như sau:
selector:nth-of-type(n)
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<span>Span 1</span>
<p>Paragraph 3</p>
</div>
p:nth-of-type(2) {
color: blue; /* Chọn đoạn văn thứ 2 */
}
Trong ví dụ này, phần tử <p> thứ 2 (Paragraph 2) sẽ được chọn và đổi màu thành xanh.
nth-child() và nth-of-type()nth-child(): Chọn phần tử dựa trên vị trí trong tổng số các phần tử con (bao gồm mọi loại phần tử).nth-of-type(): Chọn phần tử dựa trên vị trí của nó trong nhóm các phần tử cùng loại (cùng tag name) trong cha mẹ.nth-child() và không có đủ phần tử con, nó có thể chọn một phần tử không phải là loại mà bạn mong muốn.nth-of-type() sẽ bỏ qua các phần tử khác loại và chỉ tính các phần tử cùng loại.<ul>
<li>Item 1</li>
<li>Item 2</li>
<span>Span 1</span>
<li>Item 3</li>
<li>Item 4</li>
</ul>
nth-child(3):li:nth-child(3) { color: green; /* Không có hiệu ứng vì Item 3 không phải là li thứ 3 */ }nth-of-type(3):li:nth-of-type(3) { color: green; /* Item 3 sẽ được chọn và đổi màu thành xanh */ }Tóm lại, nth-child() và nth-of-type() là hai công cụ mạnh mẽ trong CSS giúp bạn chọn các phần tử dựa trên vị trí của chúng. Tuy nhiên, việc lựa chọn giữa chúng phụ thuộc vào mục đích sử dụng của bạn:
nth-child() khi bạn muốn chọn phần tử dựa trên thứ tự tổng thể của nó trong cha mẹ, bất kể loại.nth-of-type() khi bạn cần chọn phần tử dựa trên vị trí trong nhóm các phần tử cùng loại.Việc hiểu rõ sự khác biệt này sẽ giúp bạn sử dụng hiệu quả các pseudo-class trong CSS và tạo ra các kiểu dáng chính xác cho trang web của mình.
