Wybierz przedostatni element za pomocą CSS

140

Wiem już o: ostatnim dziecku. Ale czy istnieje sposób na wybranie div:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

UWAGA: bez jQuery, tylko z CSS

html css css-selectors

— dynamiczny
źródło

Z pewnością istnieje jakaś logika, dlaczego przedostatnie dziecko jest znaczące?

— David Tang,

tak, muszę wybrać zarówno ostatnią, jak i przedostatnią, aby zastosować niektóre style

— dynamiczny

dlaczego nie możesz po prostu umieścić klasy w 2. ostatnim div

— Daveo

„dlaczego nie możesz po prostu umieścić klasy w przedostatnim div przedostatnim”: Być może, jeśli przejdziesz do stylu generowanej treści, w której nie masz (łatwego) dostępu do dodania klasy do przedostatniego elementu?

— Henrik,

Odpowiedzi:

279

W CSS3 masz:

:nth-last-child(2)

Zobacz: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

Obsługa przeglądarek nth-last-child :

Chrome 2

Firefox 3.5

Opera 9.5, 10

Safari 3.1, 4

Internet Explorer 9

— Frosty Z
źródło

Prawdopodobnie jest to właściwe rozwiązanie, chyba że możesz dołączyć klasę do elementu DIV, który próbujesz wybrać. Jak wspomniał Frosty, CSS3 nie jest obsługiwany przez starsze przeglądarki ani IE. Jquery jest znacznie lepszą opcją, jeśli obawiasz się o możliwość przetwarzania w różnych przeglądarkach.

— Thomas,

To była kopia / wklej z połączonego artykułu ... Zredagowana odpowiedź, dzięki.

— Frosty Z

rozwiązanie w css: #container>: nth-last-child (2) {background: red;} Sprawdź ten kod, aby zobaczyć go na żywo: codepen.io/marc_dahan/pen/JyxObz

— marcdahan

Teraz, gdy nie musimy obsługiwać starszej przeglądarki IE, ta odpowiedź będzie działać idealnie. Szczerze mówiąc, jeśli ludzie nadal używają IE 8 i starszych, nie zasługują na ładne rzeczy.

— Stender

Uwaga: opublikowano tę odpowiedź, ponieważ OP stwierdził później w komentarzach, że muszą wybrać ostatnie dwa elementy , a nie tylko przedostatni.

:nth-childSelektor CSS3 jest w rzeczywistości bardziej zdolne niż Ci się wydaje!

Na przykład spowoduje to wybranie 2 ostatnich elementów #container:

#container :nth-last-child(-n+2) {}

Ale to dopiero początek pięknej przyjaźni.

:nth-child Wsparcie przeglądarki

Pokaż fragment kodu

#container :nth-last-child(-n+2) {
  background-color: cyan;
}

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div>
 <div>SELECT THIS</div>
</div>

Rozwiń fragment

— kapa
źródło

Niezłe, moja odpowiedź wybiera tylko ostatnie dziecko minus 1. Nie wiedziałem o tym. + 'd

— rsplak