:nth-last-of-typeValitsin mahdollistaa valita yhden tai useamman elementin, joka perustuu niiden lähde järjestyksessä, kaavan mukaan. Se määritellään CSS Selectors -tason 3 spesifikaatiossa "rakenteelliseksi pseudoluokaksi", mikä tarkoittaa, että sitä käytetään tyylin luomiseen sen suhteen, että se on vanhempien ja sisarusten kanssa. Se toimii samalla tavalla kuin :nth-of-typepaitsi, että se valitsee lähdetilauksen alareunasta lähtevät kohteet, ei ylhäältä.
Oletetaan, että meillä on järjestämätön luettelo ja haluamme korostaa toiseksi viimeisen kohteen (tässä tarkassa esimerkissä "Neljäs kohde"):
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Sen sijaan, että tekisimme luokan lisäämisen luettelokohteeseen (esim. .highlight), Voimme käyttää :nth-last-of-type:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-of-type(2) ( background: lightslategrey; )Kuten näette, :nth-last-of-typeottaa argumentin: tämä voi olla yksi kokonaisluku, avainsanat "parillinen" tai "pariton" tai kaava. Jos määritetään kokonaisluku, vain yksi elementti valitaan - mutta avainsanat tai kaava iteroivat kaikki ylätason elementtien alatasot ja valitsevat vastaavat elementit - samanlainen kuin matriisissa olevien kohteiden navigointi JavaScriptissä. Avainsanat "parillinen" ja "pariton" ovat suoraviivaisia (2, 4, 6 jne. Tai 1, 3, 5 jne.). Kaava muodostetaan käyttämällä syntaksia an+b, jossa:
- “A” on kokonaisluku
- "N" on kirjaimellinen kirjain "n"
- “+” On operaattori ja voi olla joko “+” tai “-”
- “B” on kokonaisluku ja vaaditaan, jos operaattori sisältyy kaavaan
On tärkeää huomata, että tämä kaava on yhtälö ja toistaa jokaisen sisarelementin läpi, mikä määrittää, mikä valitaan. Kaavan ”n” osa, jos se sisältyy, edustaa kasvavien positiivisten kokonaislukujen joukkoa (aivan kuten iterointi taulukon läpi). Yllä olevassa esimerkissämme valitsimme jokaisen toisen elementin kaavalla 2n, joka toimi, koska joka kerta kun elementti tarkistettiin, ”n” kasvoi yhdellä (2 × 0, 2 × 1, 2 × 2, 2 × 3 jne.). Jos elementin järjestys vastaa yhtälön tulosta, se valitaan (2, 4, 6 jne.). Lue tarkempi kuvaus matematiikasta lukemalla tämä artikkeli.
Seuraavassa on joitain esimerkkejä kelvollisista :nth-last-of-typevalitsimista:
Katso Pen CSS-Tricks:: nth-last-of-type kirjoittanut Chris Coyier (@chriscoyier) CodePenistä.
Onneksi sinun ei tarvitse aina tehdä matematiikkaa itse - siellä on useita :nth-last-of-typetestaajia ja generaattoreita:
- CSS-temppujen testaaja
- Lea Veroun testaaja
Kiinnostavat paikat
:nth-last-of-typeiteroi alkuaineiden kautta lähdeluettelon alareunasta alkaen. Ainoa ero sen välillä on ja:nth-of-typese, että jälkimmäinen iteroi alkuaineiden kautta, jotka alkavat lähdeluettelon pohjasta.:nth-last-of-typeValitsin on hyvin samankaltainen:nth-last-child, mutta yksi kriittinen ero: se on tarkempi. Yllä olevassa esimerkissämme ne tuottavat saman tuloksen, koska toistamme vainlielementtejä, mutta jos iteroisimme monimutkaisemmalla sisarusten ryhmällä,:nth-last-childyritämme sovittaa yhteen kaikki sisarukset, ei vain saman elementtityypin sisarukset. Tämä paljastaa sen voiman, joka:nth-last-of-typekohdistuu tietyntyyppiseen elementtiin järjestelyssä suhteessa samanlaisiin sisaruksiin, ei kaikkiin sisaruksiin.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | 3.2+ | Toimii | 9,5+ | 9+ | Toimii | Toimii |
:nth-last-of-typeesiteltiin CSS Selectors -moduulissa 3, mikä tarkoittaa, että selainten vanhat versiot eivät tue sitä. Nykyaikainen selaintuki on kuitenkin moitteetonta, ja uusia pseudovalitsimia käytetään laajalti tuotantoympäristöissä. Jos tarvitset vanhempaa selaintukea, joko polyfill IE: lle tai käytä näitä valitsimia ei-kriittisillä tavoilla á la progressive enhancement, mikä on suositeltavaa.