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

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).

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 */ }

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)

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.

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

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

aby znaleźć elementy z ostatniego, użyj

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

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 */
    },
  },
};

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

ten kod powinien stosować ten styl do wszystkich