:nth-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.
Oletetaan, että meillä on järjestämätön luettelo ja haluamme "seepra-raita" vuorotellen luettelokohteita:
- First Item
- Second Item
- Third Item
- Fourth Item
- Fifth Item
Sen sijaan, että lisätään luokkia kuhunkin luettelokohtaan (esim. .even& .odd), Voimme käyttää :nth-of-type:
li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )Kuten näette, :nth-of-typevie argumentin: tämä voi olla yksi kokonaisluku, avainsanat "parillinen" tai "pariton" tai yllä oleva kaava. Jos kokonaisluku on määritetty, vain yksi elementti valitaan, mutta avainsanat tai kaava iteroivat kaikki ylätason elementtien alatasot ja valitsevat vastaavat elementit, jotka ovat samanlaisia kuin matriisissa olevien kohteiden navigoinnissa JavaScriptissä. Avainsanat "parillinen" ja "pariton" ovat suoraviivaisia, mutta 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-of-typevalitsimista:
Onneksi sinun ei tarvitse aina tehdä matematiikkaa itse - siellä on useita :nth-of-typetestaajia ja generaattoreita:
- CSS-temppujen testaaja
- Lea Veroun testaaja
Kiinnostavat paikat
:nth-of-typeiteroi alkuaineiden kautta alkaen lähdeluettelon yläosasta. Ainoa ero sen välillä on ja:nth-last-of-typese, että jälkimmäinen iteroi alkuaineiden kautta, jotka alkavat lähdeluettelon pohjasta.:nth-of-typeValitsin on hyvin samankaltainen:nth-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-childyritämme sovittaa yhteen kaikki sisarukset, ei vain saman elementtityypin sisarukset. Tämä paljastaa sen voiman, joka:nth-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-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.