:nth-last-childValitsin 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-childpaitsi, että se valitsee lähdetilauksen alareunasta lähtevät kohteet, ei ylhäältä.
Oletetaan, että meillä on luettelo tuntemattomasta määrästä kohteita, 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-child:
li ( background: slategrey; ) /* select the second-last item */ li:nth-last-child(2) ( background: lightslategrey; )Kuten näette, :nth-last-childottaa argumentin: tämä voi olla yksi kokonaisluku, avainsanat "parillinen" tai "pariton" tai kaava. Jos kokonaisluku on määritetty, valitaan vain yksi elementti - mutta avainsanat tai kaava iteroivat kaikki ylätason elementtien alatasot ja valitsevat vastaavat elementit, jotka ovat samanlaisia kuin matriisissa olevien kohteiden navigointi JavaScriptissä. Avainsanat "parillinen" ja "pariton" ovat suoraviivaisia (2, 4, 6 jne. Tai 1, 3, 5). 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:
Onneksi sinun ei tarvitse aina tehdä matematiikkaa itse - siellä on useita :nth-last-childtestaajia ja generaattoreita:
- CSS-temppujen testaaja
- Lea Veroun testaaja
Kiinnostavat paikat
:nth-last-childiteroi alkuaineiden kautta lähdeluettelon alareunasta alkaen. Ainoa ero sen ja sen välillä:nth-childon, että jälkimmäinen iteroi alkuaineiden kautta, jotka alkavat lähdeluettelon yläosasta.:nth-last-childValitsin on hyvin samankaltainen:nth-last-of-type, mutta yksi kriittinen ero: se on vähemmän spesifinen. 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 voiman:nth-last-child- se voi valita minkä tahansa sisarelementin järjestelystä, ei pelkästään elementtejä, jotka on määritetty ennen kaksoispistettä.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | 3.2+ | Toimii | 9,5+ | 9+ | Toimii | Toimii |
:nth-last-childesiteltiin 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.