×

Chọn phần tử thứ n trong nhóm anh em - :nth-child(n) - trong CSS

Avatar of admin
admin 0 Views

Có nhiều trường hợp khi lập trình viên muốn áp dụng một số kiểu dáng CSS cho một phần tử cụ thể trong số các anh em của nó. Để làm việc này trong CSS, chúng ta có thể sử dụng pseudo-class :nth-child(n). Đây là một công cụ mạnh mẽ và linh hoạt giúp xác định và tùy chỉnh kiểu dáng cho các phần tử con dựa trên chỉ số của chúng trong thư mục cha.

Nguyên tắc hoạt động của :nth-child(n)

Pseudo-class :nth-child(n) hoạt động bằng cách chọn phần tử con thứ n của một phần tử cha mà có cùng kiểu. Thực tế là n có thể là một số nguyên hoặc một biểu thức để chọn các phần tử dựa trên vị trí của chúng, ví dụ như 1, 2, 3, hoặc thậm chí các biểu thức như 2n, 2n+1.

Các trường hợp sử dụng cụ thể

  1. Chọn phần tử cụ thể Nếu bạn muốn chọn chỉ phần tử con thứ 2 trong danh sách của một phần tử cha, bạn có thể viết như sau:
/* chọn phần tử con thứ 2 */
.parent-element:nth-child(2) {
    color: blue;
}
  1. Chọn các phần tử con chẵn Nếu bạn muốn chọn tất cả các phần tử con chẵn, sẽ rất đơn giản với 2n.
/* chọn tất cả các phần tử con chẵn */
.parent-element:nth-child(2n) {
    background-color: grey;
}
  1. Chọn các phần tử con lẻ Tương tự, để chọn tất cả các phần tử con lẻ, bạn sử dụng 2n+1.
/* chọn tất cả các phần tử con lẻ */
.parent-element:nth-child(2n+1) {
    background-color: lightgrey;
}
  1. Chọn phần tử con ở vị trí cụ thể khác Bạn có thể chọn phần tử con thứ 4 bằng cách điền giá trị n là 4.
/* chọn phần tử con thứ 4 */
.parent-element:nth-child(4) {
    font-size: 20px;
}

Sử dụng biểu thức để chọn nhiều phần tử

Một trong những đặc tính mạnh mẽ của :nth-child(n) là khả năng sử dụng các biểu thức toán học. Chẳng hạn:

  1. Chọn mỗi phần tử thứ ba
/* chọn mỗi phần tử con thứ 3 */
.parent-element:nth-child(3n) {
    border: 1px solid black;
}
  1. Tổ hợp các điều kiện Bạn có thể kết hợp nhiều pseudo-class cùng nhau một cách sáng tạo để đạt được hiệu quả mong muốn.
/* chọn mỗi phần tử thứ 2 nhưng không phải phần tử đầu tiên */
.parent-element:nth-child(2n+2) {
    margin-left: 10px;
}

Những điều cần lưu ý

  • :nth-child() đếm từ 1, không phải từ 0 như nhiều ngôn ngữ lập trình khác.
  • Nó chỉ làm việc với các phần tử con của một phần tử cha có cùng kiểu.
  • Nếu như một phần tử không phải là phần tử con thứ n của cha nó với kiểu được chỉ định, thì CSS được áp dụng sẽ bị bỏ qua.

Kết luận

Pseudo-class :nth-child(n) là một công cụ quan trọng trong kho vũ khí của lập trình viên CSS giúp chọn và định kiểu chính xác cho các phần tử cụ thể trong nhóm anh em của chúng. Với khả năng sử dụng số nguyên và biểu thức, :nth-child(n) mang lại nhiều điều kiện linh động giúp ta dễ dàng kiểm soát kiểu dáng của các phần tử theo vị trí trong danh sách của chúng. Hãy tận dụng sức mạnh của :nth-child(n) để tối ưu hóa và làm phong phú thêm thiết kế trang web của bạn.

Comments

Bài viết liên quan