:nth-child() trong CSS: Chọn Phần Tử Dễ Dàng và Hiệu Quả

Bạn muốn chọn các phần tử con một cách linh hoạt trong CSS? Hãy khám phá sức mạnh của :nth-child() ! Nó cho phép bạn nhắm mục tiêu các phần tử dựa trên vị trí của chúng trong một phần tử cha. Đọc tiếp để nắm vững cú pháp, ứng dụng thực tế và mẹo tối ưu hóa, giúp bạn tạo ra giao diện người dùng đẹp mắt và dễ quản lý hơn. Bạn có thể tìm hiểu thêm về CSS để nâng cao kỹ năng của mình.

:nth-child() là gì?

:nth-child() là một pseudo-class (lớp giả) trong CSS. Nó cho phép bạn chọn các phần tử dựa trên vị trí số học của chúng trong một phần tử cha. Điều này mang lại khả năng kiểm soát tốt hơn đối với kiểu dáng của các phần tử con, đặc biệt khi bạn muốn tạo các kiểu xen kẽ hoặc áp dụng các quy tắc cụ thể cho một nhóm phần tử.

Cú pháp cơ bản

Cú pháp của :nth-child() khá đơn giản:

selector:nth-child(an + b) { /* Các quy tắc CSS */ }

• selector : Bộ chọn CSS nhắm mục tiêu phần tử cha.
• an + b : Một biểu thức mô tả các phần tử nào sẽ được chọn.
  • a : Một số nguyên, là hệ số của n .
  • n : Một biến, bắt đầu từ 0 và tăng dần.
  • b : Một số nguyên, là giá trị offset.

Biểu thức an + b xác định mẫu mà các phần tử sẽ được chọn. Khi n tăng lên, biểu thức sẽ tạo ra một chuỗi các số. Các phần tử con có vị trí tương ứng với các số này sẽ được chọn.

Ví dụ minh họa

Chọn phần tử con thứ ba

Để chọn phần tử con thứ ba, bạn có thể sử dụng:

p:nth-child(3) { color: blue; }

Đoạn mã này sẽ làm cho tất cả các phần tử <p> là phần tử con thứ ba có màu xanh lam.

Chọn tất cả các phần tử con chẵn

Để chọn tất cả các phần tử con chẵn, bạn có thể sử dụng:

li:nth-child(even) { background-color: #f2f2f2; }

Đoạn mã này sẽ tô màu nền xám nhạt cho tất cả các phần tử <li> có vị trí chẵn.

Chọn tất cả các phần tử con lẻ

Để chọn tất cả các phần tử con lẻ, bạn có thể sử dụng:

li:nth-child(odd) { background-color: #ffffff; }

Đoạn mã này sẽ tô màu nền trắng cho tất cả các phần tử <li> có vị trí lẻ.

Sử dụng biểu thức an + b

Để chọn mọi phần tử thứ ba, bắt đầu từ phần tử thứ hai, bạn có thể sử dụng:

div:nth-child(3n + 2) { border: 1px solid red; }

Đoạn mã này sẽ thêm đường viền màu đỏ cho các phần tử <div> ở vị trí thứ 2, 5, 8, v.v.

:nth-child() vs :nth-of-type()

Điều quan trọng là phải phân biệt giữa :nth-child() và :nth-of-type() . :nth-child() chọn các phần tử dựa trên vị trí của chúng so với *tất cả* các phần tử con của phần tử cha. Trong khi đó, :nth-of-type() chỉ xem xét các phần tử con có cùng loại với phần tử được chọn.

Ví dụ:

<div> <p>Đoạn văn 1</p> <span>Span 1</span> <p>Đoạn văn 2</p> </div>

Nếu bạn sử dụng p:nth-child(2) , không có phần tử nào được chọn vì phần tử con thứ hai là <span> . Tuy nhiên, nếu bạn sử dụng p:nth-of-type(2) , phần tử <p> thứ hai sẽ được chọn vì nó là phần tử <p> thứ hai trong số các phần tử <p> con.

Mẹo và thủ thuật

• Sử dụng :nth-child() để tạo các bảng sọc hoặc danh sách xen kẽ.
• Kết hợp :nth-child() với các bộ chọn khác để nhắm mục tiêu chính xác hơn.
• Kiểm tra kỹ biểu thức an + b để đảm bảo nó hoạt động như mong đợi.
• Hãy nhớ sự khác biệt giữa :nth-child() và :nth-of-type() .