: n. lapsi - CSS-temppuja

:nth-childValitsin voi valita yhden tai useamman elementin, joka perustuu niiden lähde järjestyksessä, kaavan mukaan.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

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ä rakennamme CSS-ruudukkoa ja haluamme poistaa marginaalin jokaisesta neljännestä ruudukkomoduulista. Tässä HTML-koodi:

 One Two Three Four Five 

Sen sijaan, että lisätään luokka jokaiseen neljänteen kohteeseen (esim. .last), Voimme käyttää :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

:nth-childValitsin tekee argumentti: tämä voi olla yksi kokonaisluku, avainsanoja even, oddtai kaava. Jos kokonaisluku on määritetty, vain yksi elementti valitaan, mutta avainsanat tai kaava iteroivat kaikki ylätason elementtien alatasot ja valitsevat vastaavat elementit - samanlainen kuin JavaScript-taulukon kohteissa liikkuminen. 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 neljännen elementin kaavalla 4n, joka toimi, koska joka kerta kun elementti tarkistettiin, ”n” kasvoi yhdellä (4 × 0, 4 × 1, 4 × 2, 4 × 3 jne.). Jos elementin järjestys vastaa yhtälön tulosta, se valitaan (4, 8, 12 jne.). Lue tarkempi kuvaus matematiikasta lukemalla tämä artikkeli.

Seuraavassa on joitain esimerkkejä kelvollisista :nth-childvalitsimista:

Onneksi sinun ei tarvitse aina tehdä matematiikkaa itse - siellä on useita :nth-childtestaajia ja generaattoreita:

• CSS-temppujen testaaja
• Lea Veroun testaaja

: n. lapsi (an + b)

Siellä on vähän tunnettu suodatin, johon voidaan lisätä :nth-childCSS Selectors -määrityksen mukaan: Kyky valita :nth-childelementtien alajoukko of muotoa käyttämällä . Oletetaan, että sinulla on luettelo sekoitetusta sisällöstä: Joillakin on luokka .video, joillakin on luokka .pictureja haluat valita kolme ensimmäistä kuvaa. Voit tehdä niin suodattimen ”of” avulla:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Huomaa, että tämä eroaa valitsimen liittämisestä suoraan :nth-childvalitsimeen:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

Tämä voi saada hieman hämmentävää, joten esimerkki voi auttaa havainnollistamaan eroa:

Selaimen tuki ”of” -suodattimelle on hyvin rajallinen: Tästä kirjoituksesta lähtien vain Safari tuki syntaksia. Voit tarkistaa suosikkiselaimesi tilan seuraavista aiheista :nth-child(an+b of s):

• Firefox: Tuki n. Lapselle (An + B sel: stä)
• Chrome: Työkalu: n. Lapsi (S +: n + b)

Kiinnostavat paikat

• :nth-childiteroi alkuaineiden kautta alkaen lähdeluettelon yläosasta. Ainoa ero sen välillä on ja :nth-last-childse, että jälkimmäinen iteroi alkuaineiden kautta, jotka alkavat lähdeluettelon pohjasta.
• Ensimmäisen nelementtien lukumäärän valitsemisen syntaksi on vähän intuitiivinen. Aloitat -nplus positiivisen määrän elementtejä, jotka haluat valita. Esimerkiksi li:nth-child(-n+3)valitsee kolme ensimmäistä lielementtiä.
• :nth-childValitsin on hyvin samankaltainen :nth-of-type, mutta yksi kriittinen ero: se on vähemmän spesifinen. Yllä olevassa esimerkissämme ne tuottavat saman tuloksen, koska toistamme vain .moduleelementtejä, mutta jos iteroisimme monimutkaisemmalla sisarusten ryhmällä, :nth-childyritämme sovittaa yhteen kaikki sisarukset, ei vain saman elementtityypin sisarukset. Tämä paljastaa voiman :nth-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
Minkä tahansa	3.2+	Minkä tahansa	9,5+	9+	Minkä tahansa	Minkä tahansa

:nth-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.