Tìm hiểu về Bộ chọn CSS:nth-child()

Giống như tất cả các bộ chọn CSS, bạn có thể sử dụng:nth-child() để xác định các thành phần trong trang web và áp dụng kiểu cho chúng. Nhưng bộ chọn này cho phép bạn thu hẹp một nhóm anh chị em dựa trên vị trí tương đối của họ.

Bộ chọn cung cấp cả tùy chọn từ khóa cơ bản và cú pháp dựa trên mẫu nâng cao để đáp ứng các yêu cầu khác nhau. Bạn có thể chọn từ các lựa chọn đơn giản tuân theo các mẫu định kỳ hoặc sử dụng các thông số kỹ thuật phức tạp để đáp ứng nhu cầu cụ thể của bạn.

Cú pháp bộ chọn:nth-child()

Là một bộ chọn lớp giả CSS, cú pháp :nth-child() tự phân biệt với các bộ chọn khác bằng cách lấy một đối số đóng vai trò làm mẫu để xác định các phần tử trong một nhóm các phần tử anh chị em.

 :nth-child(args) {
    /*...*/
} 

Điểm nhấn chính nằm ở nội dung được đặt trong dấu ngoặc đơn, mô tả một tập hợp con cụ thể của các phần tử được chọn.

Sử dụng Giá trị Từ khoá cho các Trường hợp Thường gặp

Bộ chọn cụ thể này được thiết kế để hoạt động với hai giá trị từ khóa riêng biệt, đó là “lẻ” và “chẵn”. Các giá trị này tỏ ra có hiệu quả cao khi triển khai kiểu dáng hàng thay thế trong bảng.

Một bảng liệt kê đơn giản đóng vai trò là một ví dụ minh họa về một tình huống trong đó người ta có thể sử dụng các chỉ định từ khóa này:

 <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ol> 

Bằng cách sử dụng bộ chọn :nth-child(odd) , người ta có thể sửa đổi màu sắc của mọi mục danh sách tiếp theo bằng một chỉ mục lẻ:

 :nth-child(odd) {
    color: red;
} 

Các mục được đánh số bắt đầu từ 1, sao cho mục đầu tiên sẽ được hiển thị bằng màu đỏ, tiếp theo là mục thứ ba và sau đó là mọi mục thứ ba tiếp theo.

Ký hiệu chức năng để linh hoạt hơn

Người ta có thể sử dụng một số nguyên dương duy nhất để chọn một thành phần cụ thể bằng cách sử dụng nó như sau:

 li:nth-child(4) {
    color: red;
} 

Trong trường hợp này, bộ chọn chỉ áp dụng cho phần tử thứ tư trong danh sách được cung cấp:

Trường hợp cú pháp cụ thể này liên quan đến việc chọn các thành phần dựa trên một mẫu cụ thể và thuộc danh mục cú pháp chức năng rộng hơn thực hiện chức năng này.

 :nth-child(An\+B) {
    /*...*/
} 

Trong ký hiệu cụ thể này, chúng tôi biểu thị bằng “A” kích thước bước tăng hoặc bước, biểu thị tần suất mà bộ chọn tiến lên để chọn mục tiếp theo. Với cách tiếp cận này, người ta có thể chọn các mục theo khoảng thời gian đều đặn, chẳng hạn như mọi mục khác hoặc mọi mục thứ ba, v.v. Ngược lại, “B” đại diện cho điểm ban đầu mà từ đó việc lựa chọn bắt đầu.

Ví dụ: lấy đối số 3n\+1:

 li:nth-child(3n\+1) {
    color: red;
} 

Bắt đầu quá trình lựa chọn từ phần tử ban đầu, sau đó nó sẽ tiến hành bằng cách bỏ qua hai phần tử và chuyển sang phần tử tiếp theo tiếp theo sau đó:

So sánh điều này với biểu thức 3n\+2:

 li:nth-child(3n\+2) {
    color:red;
} 

Mã cập nhật sẽ bắt đầu chọn các mục từ phần tử thứ hai của danh sách thay vì bắt đầu từ phần tử đầu tiên, trong khi vẫn tuân theo mô hình chọn mọi mục thứ ba.

Một ví dụ thú vị khác là:nth-child(n\+3):

 li:nth-child(n\+3) {
    color: red;
} 

Lệnh đã cho liên quan đến việc chọn một loạt mục, trong đó nó bắt đầu với phần tử thứ ba và tiếp tục cho đến hết. Trình tự kết quả sẽ có dạng được mô tả dưới đây:

Người ta cũng có thể sử dụng quá trình trừ để đạt được kết quả cụ thể.

 li:nth-child(3n-1) {
    color: red;
} 

Ví dụ đã cho khác với các thông lệ thông thường bằng cách bắt đầu quá trình lựa chọn từ chỉ số âm, dẫn đến việc lựa chọn phần tử thứ hai trong chuỗi theo sau là phần tử thứ năm và các phần tử tiếp theo:

Cú pháp

Lớp giả :nth-child() cho phép sử dụng từ khóa “of” kèm theo bộ chọn, đóng vai trò như một đối số trong dấu ngoặc đơn của nó. Bằng cách sử dụng cú pháp này, người ta có thể hạn chế phạm vi các phần tử mà mẫu cơ bản có khả năng chọn từ đó, do đó làm tăng tính đặc hiệu và độ chính xác của quá trình lựa chọn.

Hãy xem xét một tình huống trong đó phần đánh dấu phức tạp hơn so với phiên bản ban đầu:

 <ol>
    <li class="old">Item 1</li>
    <li class="new">Item 2</li>
    <li class="new">Item 3</li>
    <li class="old">Item 4</li>
    <li class="new">Item 5</li>
    <li class="new">Item 6</li>
    <li class="new">Item 7</li>
</ol> 

Để nhắm mục tiêu các phần tử có một lớp cụ thể và chọn mọi mục thứ hai trong nhóm đó bằng CSS, người ta có thể sử dụng lớp giả “:nth-child” kết hợp với bộ chọn lớp mong muốn. Điều này cho phép lựa chọn và sửa đổi chính xác các phần tử cụ thể dựa trên vị trí của chúng trong chuỗi các phần tử phù hợp.

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

Hãy lưu ý rằng chỉ những mục in đậm số lẻ mới xuất hiện màu đỏ:

Ngoài ra, hãy suy nghĩ về sự khác biệt giữa li.new:nth-child(even) và :target , bộ chọn nào nhắm mục tiêu tương ứng các phần tử .new khi chúng chẵn hoặc chứa phần tử con có ID là “moredetails ”, như đã trình bày trong ví dụ trước của chúng tôi. Điều đầu tiên áp dụng cho trường hợp 2 và 6 trong hình minh họa được cung cấp.

Làm việc với bộ chọn:nth-child()

Việc sử dụng bộ chọn:nth-child() cho phép tạo ra tính thẩm mỹ đặc biệt thông qua việc triển khai các màu sắc rực rỡ trên toàn bộ nội dung trang web, bao gồm việc nhấn mạnh các hàng và cột riêng lẻ trong cấu trúc dữ liệu dạng bảng. Hơn nữa, việc tích hợp bộ chọn này với các bộ chọn CSS bổ sung sẽ tạo điều kiện thuận lợi cho việc xây dựng các sơ đồ và cấu hình trực quan phức tạp bằng cách tận dụng các khả năng kết hợp của chúng.