×

Chọn phần tử thứ n từ cuối trong loại thẻ - :nth-last-of-type(n) - trong CSS

Avatar of admin
admin 0 Views

Trong CSS, việc lựa chọn các phần tử trong HTML để áp dụng định dạng là một kỹ năng quan trọng giúp tạo ra các giao diện người dùng phong phú và tương tác. Một trong những công cụ hữu ích trong CSS là trình chọn :nth-last-of-type(n). Với selector này, bạn có thể chọn các phần tử dựa trên vị trí của chúng từ cuối lên đầu trong một nhóm các phần tử cùng loại.

Ví dụ, nếu bạn có một danh sách các phần tử <li> trong thẻ <ul> và bạn muốn chọn phần tử thứ hai từ cuối lên, li:nth-last-of-type(2) sẽ là công cụ lý tưởng để áp dụng một định dạng riêng cho phần tử này.

Cách sử dụng

Selector :nth-last-of-type(n) hoạt động dựa trên công thức rất đơn giản. Đầu tiên, nó sẽ xem xét tất cả các phần tử có kiểu giống hệt nhau trong cùng một cấp độ cha, sau đó sẽ bắt đầu đếm từ phần tử cuối cùng cho đến phần tử đầu tiên theo thứ tự từ 1 trở lên.

Cú pháp

element:nth-last-of-type(n) {
  /* CSS properties */
}
  • element: Loại phần tử bạn muốn chọn, ví dụ như div, p, li, v.v.
  • n: Vị trí từ cuối lên bạn muốn chọn.

Ví dụ cụ thể

Giả sử bạn có một danh sách HTML như sau:

<ul>
  <li>Món ăn 1</li>
  <li>Món ăn 2</li>
  <li>Món ăn 3</li>
  <li>Món ăn 4</li>
  <li>Món ăn 5</li>
</ul>

Nếu bạn muốn chọn phần tử <li> thứ hai từ cuối lên và thay đổi màu nền của nó, bạn có thể viết như sau:

li:nth-last-of-type(2) {
  background-color: yellow;
}

Trong trường hợp này, li:nth-last-of-type(2) sẽ chọn "Món ăn 4" và áp dụng màu nền vàng cho nó.

Ứng dụng thực tế

Selector :nth-last-of-type(n) rất hữu ích trong nhiều trường hợp khác nhau:

  1. Bố cục lưới: Nếu bạn có một lưới sản phẩm và muốn làm nổi bật sản phẩm gần cuối cùng, đây là cách tuyệt vời để làm điều đó.
  2. Danh sách bài viết: Trong trang blog, bạn có thể muốn làm nổi bật bài viết gần đây nhất hoặc các bài viết gần cuối.
  3. Biểu mẫu: Nếu bạn cần áp dụng định dạng đặc biệt cho các ô hoặc hàng cuối cùng trong bảng biểu mẫu.
  4. Menu: Áp dụng định dạng dành riêng cho các mục menu ở gần cuối, thường là các liên kết như "Điều khoản dịch vụ" hoặc "Chính sách bảo mật".

Kết hợp với các selectors khác

Selector :nth-last-of-type(n) có thể được kết hợp với các CSS selectors khác để đạt được các hiệu ứng phức tạp hơn. Ví dụ:

div.classname:nth-last-of-type(3) {
  font-weight: bold;
  color: red;
}

Đây sẽ chọn phần tử div với class classname thứ ba từ cuối lên và áp dụng các thuộc tính định dạng như in đậm và màu đỏ cho văn bản.

Lưu ý

  • Trường hợp n là một số nguyên dương (1, 2, 3,...). Nếu n lớn hơn số lượng phần tử hiện có, selector sẽ không chọn bất kỳ phần tử nào.
  • :nth-last-of-type(n) chỉ đếm và chọn các phần tử có cùng loại cha trong cùng một cấp.

Kết luận

CSS cung cấp một tập hợp quyền lực của các selectors, và :nth-last-of-type(n) là một trong số đó, giúp bạn dễ dàng chọn và định dạng các phần tử dựa trên vị trí từ cuối lên, mang lại sự linh hoạt và kiểm soát chi tiết hơn trên trang web của bạn. Việc hiểu rõ và biết cách tận dụng triệt để các selector này sẽ giúp quá trình thiết kế web của bạn trở nên hiệu quả và phong phú hơn nhiều.

Comments

Bài viết liên quan