×

Chọn phần tử thứ n trong loại thẻ tương tự - :nth-of-type(n) - trong CSS

Avatar of admin
admin 0 Views

CSS là một ngôn ngữ được sử dụng để mô tả việc trình bày một tài liệu viết bằng HTML hoặc XML. Trong CSS, có nhiều phương pháp để chọn các phần tử HTML cụ thể. Một trong những phương pháp hữu ích là sử dụng pseudo-class :nth-of-type() để chọn phần tử dựa trên thứ tự trong loại thẻ giống nhau.

Pseudo-class :nth-of-type(n) cho phép chúng ta đặc biệt hóa các phần tử dựa trên thứ tự của chúng trong danh sách các phần tử cùng loại. Phương pháp này đặc biệt hữu ích khi bạn muốn áp dụng cùng một kiểu định dạng cho nhiều phần tử cùng loại mà không cần sử dụng thêm lớp CSS hoặc ID. Hãy cùng khám phá chi tiết cách sử dụng và tính năng tuyệt vời của :nth-of-type(n).

Hiểu về :nth-of-type()

Để hiểu cách :nth-of-type() hoạt động, hãy bắt đầu với cú pháp cơ bản của nó:

element:nth-of-type(n) {
  // style properties
}
  • element: Loại thẻ (ví dụ: div, p, li, v.v.)
  • n: Số thứ tự hoặc một công thức để xác định các phần tử

Các Giá Trị Của n

  • Số nguyên cụ thể: Nếu bạn đặt n là một số nguyên cụ thể (ví dụ: 2), thì :nth-of-type(2) sẽ chọn phần tử thứ hai trong danh sách các phần tử cùng loại.

    p:nth-of-type(2) {
  color: blue;
}

    Kết quả: Thay đổi màu sắc của đoạn văn thứ hai trong số các đoạn văn (<p>).

  • Bội số: Bạn cũng có thể sử dụng các biểu thức như 2n, 3n, v.v., để chọn các phần tử theo một bội số nhất định.

    li:nth-of-type(2n) {
  background-color: lightgray;
}

    Kết quả: Các phần tử <li> có thứ tự là bội số của 2 (2, 4, 6,...) sẽ có màu nền xám nhạt.

  • Biểu thức phức hợp: n có thể là một biểu thức như 2n+1 để chọn các phần tử về vị trí.

    div:nth-of-type(2n+1) {
  font-weight: bold;
}

    Kết quả: Các phần tử <div> với vị trí là lẻ (1, 3, 5,...) sẽ được in đậm.

  • Từ khóa đặc biệt: nth-of-type cũng hỗ trợ từ khóa odd (lẻ) và even (chẵn) để chọn các phần tử vị trí lẻ và chẵn:

    tr:nth-of-type(odd) {
  background-color: #efefef;
}

tr:nth-of-type(even) {
  background-color: #ffffff;
}

    Kết quả: Các hàng trong bảng (<tr>) với vị trí lẻ sẽ có màu nền xám nhạt, các hàng chẵn sẽ có màu trắng.

Ví Dụ Thực Tế

Giả sử bạn có một danh sách các bài blog và bạn muốn thay đổi màu mỗi tựa đề bài thứ tư:

<h2>Title 1</h2>
<h2>Title 2</h2>
<h2>Title 3</h2>
<h2>Title 4</h2>
<h2>Title 5</h2>
<h2>Title 6</h2>

CSS như sau:

h2:nth-of-type(4) {
  color: red;
}

Lợi Ích của :nth-of-type()

  1. Tiết kiệm thời gian và công sức: Thay vì thêm lớp CSS cho từng phần tử, bạn chỉ cần sử dụng một dòng CSS cho các phần tử theo thứ tự cụ thể.
  2. Giảm tệp HTML: Không cần bổ sung các lớp hoặc ID không cần thiết vào mã HTML.
  3. Tăng tính linh hoạt: Dễ dàng quản lý và thay đổi kiểu định dạng cho một nhóm phần tử cụ thể chỉ bằng cách thay đổi một dòng CSS.

Kết Luận

Trong việc ứng dụng CSS một cách linh hoạt và hiệu quả, pseudoclass :nth-of-type() là một công cụ mạnh mẽ để bạn có thể kiểm soát và phong cách hóa các phần tử HTML dựa trên thứ tự của chúng. Đây là một kỹ thuật tuyệt vời không chỉ giúp giảm bớt mã HTML mà còn cung cấp khả năng linh hoạt trong việc chỉnh sửa giao diện trang web.

Comments

Bài viết liên quan