Làm cách nào tôi có thể chọn tất cả con của một phần tử ngoại trừ con cuối cùng?

371

Làm cách nào để tôi chọn tất cả trừ đứa trẻ cuối cùng sử dụng bộ chọn CSS3?

Ví dụ, chỉ có được đứa con cuối cùng div:nth-last-child(1).

css-selectors css

— RyanScottLewis
nguồn

689

Bạn có thể sử dụng lớp giả phủ định:not() chống lại lớp :last-childgiả . Được giới thiệu CSS Selector Cấp 3, nó không hoạt động trong IE8 trở xuống:

:not(:last-child) { /* styles */ }

— Nick Craver
nguồn

cái này được sử dụng nguyên trạng? Không có gì trước đại tràng đầu tiên?

— johny tại sao

bạn sẽ thêm nó vào bộ chọn cơ sở thông thường của bạn ( divtrong ví dụ OP)

— Dallas

2

Đối với những người sử dụng SASS, bạn có thể sử dụng &:not(:last-child) { /* styles * }bên trong yếu tố bạn muốn tác động.

— Martin James

100

Làm nó đơn giản:

Bạn có thể áp dụng kiểu của mình cho tất cả div và khởi tạo lại cái cuối cùng với : last-child :

ví dụ trong CSS :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

hoặc trong SCSS :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

dễ đọc / nhớ
nhanh để thực hiện
tương thích với trình duyệt (IE9 + vì vẫn là CSS3)

— Sebastien Horin
nguồn

6

Đối với tôi ít nhất, điều này có mùi mã xấu. Bạn đang cố tình áp dụng quy tắc css cho một yếu tố mà bạn không muốn, chỉ sau đó cố gắng tạo một lớp khác để hoàn tác nó. Đối với tôi, đó là một mùi mã xấu. Tôi sợ rằng loại mã hóa css có thể dẫn đến việc duy trì css ngày càng khó hơn. Nói cách khác, bạn đang xây dựng mã spaghetti css.

— Alexander Bird

1

điều này cũng có thể hoạt động nhưng vấn đề là khi bạn có nhiều kiểu css như (viền, màu, cỡ chữ, v.v.), bạn sẽ cần phải khởi tạo lại kiểu css cho: con cuối cùng. Vì vậy, giải pháp phù hợp là sử dụng: không (: con cuối cùng)

— davecar21

33

Giải pháp của Nick Craver hoạt động nhưng bạn cũng có thể sử dụng điều này:

:nth-last-child(n+2) { /* Your code here */ }

Chris Coyier của CSS Tricks đã tạo ra một thử nghiệm hay : thứ n cho việc này.

— Robin B
nguồn

Mozilla có một định nghĩa tốt về : đứa con cuối cùng

— Clint Pachl

1

Một số người nói rằng :notgiả rất đắt tiền. Vì vậy, nó có thể là một ý tưởng tốt để cố gắng tránh nó khi có thể.

— Chất dẫn truyền thần kinh

22

Khi IE9 đến, nó sẽ dễ dàng hơn. Tuy nhiên, rất nhiều thời gian, bạn có thể chuyển vấn đề sang một yêu cầu: con đầu tiên và tạo kiểu cho phần đối diện của phần tử (IE7 +).

— Nicholas Wilson
nguồn

10

Sử dụng giải pháp của nick craver với selectivizr cho phép giải pháp trình duyệt chéo (IE6 +)

— delphi
nguồn

1

để tìm các yếu tố cuối cùng, sử dụng

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

— Avinash Malhotra
nguồn

1

Giải pháp của Nick Craver đã cho tôi những gì tôi cần nhưng để làm cho nó rõ ràng cho những người sử dụng CSS-in-JS:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
nguồn

1

.nav-menu li:not(:last-child){
    // write some style here
}

mã này nên áp dụng kiểu cho tất cả

ngoại trừ đứa con cuối cùng

— RyanGonzalezUSA
nguồn