Jak mogę wybrać wszystkie elementy potomne elementu z wyjątkiem ostatniego elementu potomnego?

371

Jak wybrać wszystkie oprócz ostatniego dziecka za pomocą selektorów CSS3?

Na przykład, aby uzyskać tylko ostatnie dziecko, byłoby div:nth-last-child(1).

css-selectors css

— RyanScottLewis
źródło

689

Możesz użyć pseudoklasy negacji:not() przeciwko :last-childpseudoklasie . Wprowadzany selektor CSS poziom 3, nie działa w IE8 lub niższej:

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

— Nick Craver
źródło

to jest używane jak jest? Bez czegokolwiek przed pierwszym dwukropkiem?

— Johnny, dlaczego

dołączasz to do normalnego selektora bazy ( divw przykładzie PO)

— Dallas

2

Dla tych, którzy używają SASS, możesz użyć &:not(:last-child) { /* styles * }wewnątrz elementu, na który chcesz wpłynąć.

— Martin James

100

Uprość to:

Możesz zastosować swój styl do wszystkich div i ponownie zainicjować ostatni z : last-child :

na przykład w CSS :

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

lub w SCSS :

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

łatwy do odczytania / zapamiętania
szybki do wykonania
kompatybilny z przeglądarką (IE9 +, ponieważ wciąż jest CSS3)

— Sebastien Horin
źródło

6

Dla mnie przynajmniej ma to nieprzyjemny zapach. Świadomie stosujesz regułę css do elementu, którego nie chcesz, tylko po to, aby spróbować upiec kolejną warstwę, aby ją cofnąć. Dla mnie to nieprzyjemny zapach kodu. Obawiam się, że tego rodzaju kodowanie css może prowadzić do coraz trudniejszego utrzymania css. Innymi słowy, budujesz kod spaghetti css.

— Alexander Bird

1

może to również działać, ale problem polega na tym, że gdy masz wiele stylów css, takich jak (obramowanie, kolor, rozmiar czcionki itp.), musisz ponownie zainicjować styl css dla: last-child. Odpowiednim rozwiązaniem jest więc użycie: not (: last-child)

— davecar21

33

Rozwiązanie Nicka Cravera działa, ale możesz także użyć tego:

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

Chris Coyier z CSS Tricks wykonał niezły : n-ty tester do tego.

— Robin B.
źródło

Mozilla ma dobrą definicję : n-tego-ostatniego-dziecka

— Clint Pachl

1

Niektórzy twierdzą, że :notpseudo jest bardzo drogie. Dlatego dobrym pomysłem może być unikanie go tam, gdzie to możliwe.

— Neurotransmitter

22

Kiedy nadejdzie IE9, będzie łatwiej. Często jednak możesz zmienić problem na wymagający: pierworodny i stylizować przeciwną stronę elementu (IE7 +).

— Nicholas Wilson
źródło

10

Używanie rozwiązania nick cravera z selectivizr pozwala na rozwiązanie dla różnych przeglądarek (IE6 +)

— delphi
źródło

1

aby znaleźć elementy z ostatniego, użyj

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

— Avinash Malhotra
źródło

1

Rozwiązanie Nicka Cravera dało mi to, czego potrzebowałem, ale wyraźnie mówiąc o tych, którzy używają 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
źródło

1

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

ten kod powinien stosować ten styl do wszystkich

z wyjątkiem ostatniego dziecka

— RyanGonzalezUSA
źródło