CSS :nth-child(n) selector là gì ?

Posted by Lập Trình Viên CSS 6 phút đọc

CSS :nth-child(n) selector được sử dụng để phù hợp với các phần tử dựa trên vị trí của chúng trong một nhóm anh em đồng cấp, bất kể loại của phần tử cha. N có thể là từ khóa, công thức hoặc số. Việc sử dụng selector này giúp cho việc chọn lựa các phần tử trở nên dễ dàng hơn và linh hoạt hơn.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS :nth-child(n) selector là gì ?

CSS :nth-child(n) selector là một cách để xác định phần tử con của một phần tử đang được chọn. Nó sẽ chọn tất cả các phần tử con của phần tử đang được chọn, có vị trí là số n trong danh sách các phần tử con. Selector này cũng có thể sử dụng các công thức và từ khóa để chỉ định điều kiện chọn.

CSS :nth-child(n) selector được sử dụng bởi các lập trình viên web khi họ muốn chọn một tập hợp các phần tử cụ thể trong một trang web. Ví dụ, nếu một trang web có một danh sách các sản phẩm, các lập trình viên có thể sử dụng selector này để chọn các sản phẩm có màu sắc, giá cả hoặc kích thước khác nhau.

CSS :nth-child(n) selector là một cách để chọn phần tử con của một phần tử đang được chọn bằng cách sử dụng vị trí của chúng trong danh sách các phần tử con. Selector này có thể được sử dụng để chọn tất cả các phần tử con có vị trí là số n trong danh sách các phần tử con.

Hướng dẫn CSS :nth-child(n) selector

Để sử dụng CSS :nth-child(n) selector, bạn cần biết cú pháp của nó. Cú pháp của selector này có dạng:

selector:nth-child(n) {
  /* CSS properties */
}

Trong đó, “selector” là phần tử cha của phần tử con mà bạn muốn chọn, “n” là một số nguyên, từ khóa hoặc công thức. Bạn cũng có thể sử dụng functional notation (An+B) để chọn các phần tử con theo một mẫu chính xác hơn.

Ví dụ:

/*Select all odd children*/
li:nth-child(odd) {
  background-color: yellow;
}

/*Select every third child*/
li:nth-child(3n) {
  background-color: lightblue;
}

/*Select second and fourth child*/
li:nth-child(2n+2) {
  background-color: pink;
}

Thêm ví dụ thực tế:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS :nth-child Selector</title> 
        <style>  
            p:nth-child(3n+4) { 
              background: yellow; 
              color: black; 
			  font-size:30px;
            } 
        </style> 
    </head> 
    <body style = "text-align:center"> 
        <h1> 
            Hello World 
        </h1> 
        <h2> 
            Welcome to the Lap Trinh Vien 
        </h2> 
      
        <p>It will not affected.</p> 
        <p>It will be affected.</p> 
        <p>Not affected.</p> 
        <p>Not affected.</p> 
        <p>It will be affected.</p> 
       
    </body> 
</html>

Ưu và Nhược điểm CSS :nth-child(n) selector

Ưu điểm

  • Cho phép chọn các phần tử con dựa trên vị trí của chúng, không phụ thuộc vào loại của phần tử cha.
  • Cho phép sử dụng công thức và từ khóa để chọn các phần tử con theo một mẫu cụ thể.

Nhược điểm

  • Selector có thể trở nên khó khăn trong việc áp dụng nếu số lượng phần tử con rất lớn hoặc phức tạp.
  • Không được hỗ trợ trên một số trình duyệt cũ.

Lời khuyên CSS :nth-child(n) selector

  • Sử dụng selector này đ ể lựa chọn các phần tử con của phần tử cha một cách dễ dàng và linh hoạt hơn.
  • Tuy nhiên, hãy cẩn thận khi sử dụng selector này trên các danh sách phần tử con có số lượng lớn hoặc phức tạp. Nếu không, selector này có thể trở nên khó khăn trong việc áp dụng và làm cho mã CSS của bạn trở nên rối mắt.
  • Hãy đảm bảo kiểm tra tính tương thích với trình duyệt trước khi sử dụng selector này.

Selector này có thể được sử dụng để chọn các phần tử con theo mẫu nào?

N có thể là từ khóa, công thức hoặc số. Bạn cũng có thể sử dụng functional notation (An+B) để chọn các phần tử con theo một mẫu cụ thể hơn.

Tại sao chúng ta cần sử dụng selector này?

Selector này giúp cho việc chọn lựa các phần tử trở nên dễ dàng hơn và linh hoạt hơn.

Selector này có nhược điểm gì không?

Selector này có thể trở nên khó khăn trong việc áp dụng nếu số lượng phần tử con rất lớn hoặc phức tạp. Nó cũng không được hỗ trợ trên một số trình duyệt cũ.

Có thể sử dụng selector này để chọn phần tử cha không?

Selector này chỉ có thể được sử dụng để chọn các phần tử con của một phần tử đang được chọn.

Tôi có thể sử dụng selector này để chọn các phần tử con của nhiều phần tử cha khác nhau không?

Không, selector này chỉ có thể được sử dụng để chọn các phần tử con của một phần tử cha đang được chọn.