Có thể chọn n mục cuối cùng với nth-child không?

130

Sử dụng danh sách tiêu chuẩn, tôi đang cố gắng chọn 2 mục danh sách cuối cùng. Tôi có nhiều hoán vị khác nhau An+Bnhưng dường như không có gì để chọn 2 cuối cùng:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

Tôi biết về một bộ chọn CSS3 mới như thế nào :nth-last-child()nhưng tôi thích cái gì đó hoạt động trong một vài trình duyệt hơn nếu có thể (đặc biệt không quan tâm đến IE).

css css-selectors

— Bất mãn
nguồn

5

Mặc dù vậy, IE hỗ trợ cho trình duyệt :nth-last-child()gần giống như :nth-child() theo quirksmode.org . Ngoài ra, :nth-child()và :nth-last-child()cả hai đều được giới thiệu trong CSS3, không cũ hơn hay mới hơn theo nghĩa đó.

— BoltClock

Rất nhiều nth-childthủ thuật hữu ích được tóm tắt bằng css-trick

— m7913d

273

Điều này sẽ chọn hai iems cuối cùng của danh sách:

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

<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>

Mở rộng đoạn trích

— John Guise
nguồn

Có nhưng bạn đang sử dụng :nth-last-child()đã được đề cập.

— BoltClock

6

(-n + 2) => Đây là thứ tôi đang tìm kiếm. Cảm ơn

— Surjith SM

16

Đây phải là câu trả lời được chấp nhận, vâng, đứa trẻ thứ n đã được đề cập, nhưng không chính xác làm thế nào (-n + b) là một mẹo hay

— BlackTigerX

56

nth-last-childNghe có vẻ như nó được thiết kế đặc biệt để giải quyết vấn đề này, vì vậy tôi nghi ngờ liệu có một sự thay thế tương thích hơn không. Hỗ trợ có vẻ khá tốt , mặc dù.

— Bắc Kinh
nguồn

Cảm ơn về liên kết - có vẻ như hỗ trợ trẻ em thứ n thực sự giống như hỗ trợ trẻ em thứ n (tôi chắc chắn IE8 đã hỗ trợ trẻ em thứ n nhưng có thể không).

— DisgruntledGoat

14

:nth-last-child(-n+2) nên làm mánh khóe

— Danyl Sobolev
nguồn

1

Do định nghĩa về ngữ nghĩa của nth-child, tôi không thấy điều này có thể xảy ra mà không bao gồm độ dài của danh sách các yếu tố liên quan. Điểm quan trọng của ngữ nghĩa là cho phép phân tách một nhóm các phần tử con thành các nhóm lặp lại ( chỉnh sửa - cảm ơn BoltClock) hoặc vào phần đầu tiên của một số độ dài cố định, tiếp theo là "phần còn lại". Bạn sắp xếp điều ngược lại với điều đó, đó là những gì nth-last-childmang lại cho bạn.

— Nhọn
nguồn

1

Với :nth-child()bạn có thể chọn các myếu tố đầu tiên bằng cách chỉ định :nth-child(-n+m).

— BoltClock

@BoltClock Tôi sẽ phải suy nghĩ về điều đó trong một giây ... ồ, vâng, bạn đúng về điều đó. Rõ ràng tôi không có nhiều khả năng để tuyên bố nghiêm túc về ý định của ủy ban là gì khi phát minh ra các bộ chọn CSS3 :-)

— Pointy

-2

Nếu bạn đang sử dụng jQuery trong dự án của mình hoặc sẵn sàng đưa nó vào, bạn có thể gọi nth-last-childthông qua API bộ chọn của nó (đây là mô phỏng này nó sẽ trình duyệt chéo). Đây là một liên kết đến một nth-last-childplugin. Nếu bạn đã sử dụng phương pháp nhắm mục tiêu này, các yếu tố bạn quan tâm:

$('ul li:nth-last-child(1)').addClass('last');

Và sau đó tạo kiểu lại lastlớp thay vì các bộ chọn giả nth-childhoặc nth-last-childgiả, bạn sẽ có trải nghiệm trình duyệt chéo phù hợp hơn nhiều.

— Nathan Anderson
nguồn