CSS-sekvenssielementin numero. Miten nth-lapsi toimii - Web-standardit

Pseudo-luokka: nth-lasta käytetään lisäämään tyyliä elementtien perusteella.

Nimitykset

Arvot

odd kaikki ne. myyntitunnukset Elementtejä. Jopa kaikki tietävät elementit.<число> Sarjanumero tytärelementti Vanhemman suhteen. Numerointi alkaa yhdellä, se on luettelon ensimmäinen elementti.<выражение> Aseta ± B: n muodossa, jossa A ja B ovat kokonaislukuja, ja n on laskuri, joka ottaa automaattisesti arvon 0, 1, 2 ...

Jos A on nolla, sitä ei ole kirjoitettu ja tietue vähenee b. Jos b on nolla, sitä ei myöskään ole määritetty ja ilmaisu kirjoitetaan muodossa. A ja B voi olla negatiivisia numeroita, tässä tapauksessa plus-merkki muuttuu miinus, esimerkiksi: 5N-1.

Negatiivisten arvojen A ja B käytön vuoksi jotkin tulokset voivat olla myös negatiivisia tai yhtä suuria. Vain positiiviset arvot vaikuttavat kuitenkin elementteihin, koska elementtien numero alkaa 1.

Tab. Kuvio 1 esittää joitain mahdollisia ilmaisuja ja avainsanoja ja määritellään myös, mitkä elementit ovat mukana.

On sallittua yhdistää kaksi pseudo-luokkaa: nth-lapsi valita elementtien valikoiman. Tässä kaikki toisesta elementit valitaan.

: Nth-lapsi (n + 2): nth-child (-N + 5) (...)

Esimerkki

SISÄÄN tämä esimerkki Pseudo-luokka: nth-lasta käytetään muuttamaan taulukon ensimmäisen rivin tyyliä sekä korostamaan kaikkien osien väriä (kuvio 1).

Kuva. 1. Pseudoklassin käyttö: nth-lapsi pöydälle rivit

Eritelmä

Jokainen eritelmä kulkee useita hyväksyntävaiheita.

• Suositus - eritelmä Hyväksytty W3C ja suositellaan vakiona.
• Ehdokasuositus ( Mahdollinen suositus ) - Standardista vastaava ryhmä on tyytyväinen, koska se täyttää tavoitteensa, mutta kehitysyhteisön apu standardin toteuttamiseksi vaaditaan.
• Ehdotettu suositus ( Tarjottu suositus) - Tässä vaiheessa asiakirja toimitetaan W3C: n neuvoa-antavalle alukselle lopulliseen hyväksyntään.
• Työskentely Luonnos (työprojekti) on luonnoksen kypsempi versio keskustelun jälkeen ja muutoksista yhteisön harkiksille.
• Toimittajan luonnos ( Editorial Chernovik) - hankkeen editori toimittajien tekemisen karkea versio.
• Luonnos ( Chernovikin eritelmä) - standardin ensimmäinen musta versio.

Oletetaan, että tällainen HTML:

<p\u003eVähän.</ P\u003e
<p\u003ePossu.</ P\u003e
</ Osa\u003e

p: n. Lapsi (2) (väri: punainen;)

p: N: n tyyppi (2) (väri: punainen;)

Vaikka tietysti näissä valikossa on ero.

Pseudo-luokka : Nth-lapsitarkoittaa Valitse kohde jos:

1. Tämä elementti on kohta;
2. Tämä on yhden vanhemman toinen osa.

1. Valitse yhden vanhemman toinen kappale.

<h1\u003eSanat.</ H1\u003e.
<p\u003eVähän.</ P\u003e
<p\u003ePossu.</ P\u003e
</ Osa\u003e

p: N: n lapsi (2) (väri: punainen;) / * ei toimi * /

p: N: n tyyppi (2) (väri: punainen;) /* Yhä työskentelemässä */

Jos Lisää

jälkeen

, sitten valitsin: nth-child ei valitse mitäänKoska kohta ei ole enää toinen elementti. Valitsija C: N: n tyyppi toimii edelleen.

Minusta tuntuu: n. Kuinka usein luulet "Haluan valita toisen elementin vanhemmassa, jos se on kohta." Joskus on mahdollista, mutta useammin ajattelet "valita toinen kohta" tai "valita taulukon kolmas rivi", jotta nämä tehtävät sopivat: nth-of-tyyppinen (uudelleen mielestäni).

Useimmat tilanteet, kun sanon "Miksi valitsinni kanssa: nth-lapsi ei toimi?" Se tapahtuu, koska unohdan näyte tunnisteista ja tarvittava tunniste ei osoittaudu olemaan tilille, jota tarvitset. Siksi käytettäessä: nth-child, on parempi määrittää se vanhemmasta eikä käyttää sitoutumista tunnisteeseen.

dL: N: n lapsi (2) () / * Tämä vaihtoehto on parempi kuin * /
DD: N: n lapsi (2) () / * Tämä * /

Mutta tietenkin se riippuu erityisestä tilanteesta.

Tuki-selaimet: n. Sanoisin, jos tarvitset syvempää tukea, käytä sitten JQuery (käytä valitsinta ja käytä luokkaa, johon tarvitset sitä), mutta JQuery on lakannut tukemasta: nth-of-tyyppinen. Kuulin, että harvinainen käyttö, mutta tuntuu oudolta minulle. Jos haluat mennä tällä tavalla, sitten

Tällainen valitsin, tarkemmin sanottuna pseudo-luokka, nimeltään: nth-lapsi. Tässä on esimerkki sen käytöstä:

UL Li: nth-lapsi (3n + 3) (väri: #ccc;)

Mikä tekee CSS-koodin edellä annetuista? Hän valitsee jokaisen kolmannen elementin merkityn luettelon sisällä: Tämä on kolmas, 6., 9., 12., jne. Katsotaanpa, miten se toimii tämän ilmaisun ja mitä muuta voidaan tehdä käyttämällä: nth-child.

Kaikki riippuu sulujen välillä. Valitsija: nth-lapsi ottaa kaksi avainsanaa: jopa ja pariton. Kaikki on yksinkertainen: jopa valitsee tietäen elementtejä, kuten 2., 4., 6., jne., Ja pariton valitsee outoa elementtejä, kuten 1., 3., 5. ja t. D. D.

Kuten ensimmäisestä esimerkistä voidaan nähdä, nth-lapsi hyväksyy myös lausekkeen parametriksi. Sisältää yksinkertaisimmat yhtälöt, toisin sanoen vain numerot. Jos laitat ne suluissa, valitaan vain yksi kohde vastaavalla numerolla. Esimerkiksi, miten valita vain viides elementti:

UL Li: nth-lapsi (5) (väri: #ccc;)

Mennään kuitenkin takaisin 3N + 3 ensimmäisestä esimerkistä. Miten se toimii ja miksi jokainen kolmas osa valitaan? Koko keskittyminen muuttujan N ja edellä mainittuun algebrallisen yhtälön ymmärtämiseen. Ajattele n, koska se alkaa tyhjästä kokonaislukuja. Lisää sitten yhtälö. Joten 3n on 3 x n ja kaikki yhtälö yhdessä on (3 × n) +3. Nyt korvaamalla n, enemmän tai yhtä suuret nolla, saamme:

• (3 × 0) + 3 \u003d 3 \u003d kolmas elementti
• (3 × 1) + 3 \u003d 6 \u003d 6. elementti
• (3 × 2) + 3 \u003d 9 \u003d 9. elementti jne.

Entä: nth-child (2n + 1)?

• (2 × 0) + 1 \u003d 1 \u003d 1. elementti
• (2 × 1) + 1 \u003d 3 \u003d 3RD Elementti
• (2 × 2) + 1 \u003d 5 \u003d 5. elementti jne.

Joten, lopeta! Tämä on sama kuin pariton. Sitten ehkä sinun ei pitäisi käyttää tätä ilmaisua? Mutta tässä tapauksessa emme altista ensimmäistä esimerkkiä tarpeettomasta komplikaatiosta? Entä jos 3n + 3 sijasta kirjoitamme 3n + 0 tai jopa helpompaa 3n?

• (3 × 0) \u003d 0 \u003d mitään
• (3 × 1) \u003d 3 \u003d kolmas elementti
• (3 × 2) \u003d 6 \u003d 6. elementti
• (3 × 3) \u003d 9 \u003d 9. elementti jne.

Joten, kuten näet, tulos tulee samaan, mikä tarkoittaa, että ei ole tarvetta +3. Voimme käyttää N: n negatiivisia arvoja, joilla on sama menestys yhtälöissä. Esimerkiksi 4N-1:

• (4 × 0) - 1 \u003d -1 \u003d mitään
• (4 × 1) - 1 \u003d 3 \u003d kolmas elementti
• (4 × 2) - 1 \u003d 7 \u003d 7. elementti jne.

Käyttö - voi tuntua oudolta - loppujen lopuksi, jos lopputulos on negatiivinen, niin näytteessä ei ole elementtejä. Mutta jos lisäät yhtälön ja jälleen saadakseen tuloksen positiiviseksi, näyte on melko mielenkiintoinen: sen kanssa voit saada ensimmäisen N-elementit esimerkiksi seuraavasti: - N + 3:

• -0 + 3 \u003d 3 \u003d 3RD Elementti
• -1 + 3 \u003d 2 \u003d toinen elementti
• -2 + 3 \u003d 1 \u003d 1. elementti
• -3 + 3 \u003d 0 \u003d mitään jne.

SitePointissa on hyvä viitekirja, jossa on söpö merkki, jonka häpeämättä julkaise täällä:

n.	2N + 1.	4N + 1.	4N + 4.	4n.	5N-2	-N + 3.
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

Tuki-selaimet

Valitsija: nth-child - yksi harvoista CSS-valitsimista, jotka lähes täysin tuetaan moderni selaimet Eikä ehdottomasti tue IE, jopa IE8: ssa. Siksi käytettäväksi ja lopullinen tulos tehdään progressiivisen parannuksen tekniikalla - voit käyttää sitä turvallisesti joidenkin koostumuselementtien, kuten taulukon väriaineiden. Ei kuitenkaan ole tarpeen soveltaa sitä vakavissa tapauksissa. Esimerkiksi vedota siihen sivuston asettelussa tai poista oikea kenttä kustakin kolmannesta lohkosta ruudukon kolmessa kolmeen siten, että ne tulevat riviin.

CSS: ssä on valinta, joka on tarkempi, pseudo-valitsin nimeltä Nth-Child. Esimerkki sen käytöstä:

UL Li: nth-lapsi (3n + 3) (väri: #ccc;)

Edellä mainitut CSS seuraavat: koskee tyyliä ei-mitatun luettelon jokaiselle kolmannelle elementille. Nimittäin kuin 3., 6., 9., 12. jne. Mutta miten se toimii? Ja myös mitä hyötyä voin poistaa käyttämällä nth-lasta?

Tärkein merkitys on ilmaista suluissa. Nth-lapsi kestää kaksi avainsanat: jopa. (jopa) ja outo. (outo). Niiden merkitys on ehdottoman selvä. Jopa valitsee jopa elementit (2, 4, 6), parittomat (1, 3, 5).

Kuten edellä olevassa esimerkissä on esitetty, NTH-lapsi voi käsitellä lausekkeita. Mikä on yksinkertaisin mahdollinen ilmaisu? Vain numero. Jos kirjoitat numeroa suluissa, valitaan yksi yksi ainoa osa. Valitse esimerkiksi viides luettelo:

UL Li: nth-lapsi (5) (väri: #ccc;)

Palaa ensimmäiseen esimerkkiin, jossa käytimme ilmaisua (3N + 3). Miten hän toimii? Miksi hän valitsee jokaisen kolmannen elementin? Koko olemus muuttujan n. Se vie kokonaislukuja nolla ja paljon muuta. Katsotaanpa Lue lisää:

(3 x 0) + 3 \u003d 3 \u003d 3-eli elementti (3 x 1) + 3 \u003d 6 \u003d 6. elementti (3 x 2) + 3 \u003d 9 \u003d 9. elementti jne.

Kokeile nyt seuraavaa ilmaisua: nth-child (2n + 1):

(2 x 0) + 1 \u003d 1 \u003d 1TH-elementti (2 x 1) + 1 \u003d 3 \u003d 3-eli elementti (2 x 2) + 1 \u003d 5 \u003d 5. elementti jne.

Tämän seurauksena heillä oli myös sama kuin outoa, joten tällaista ilmaisua ei tarvitse käyttää. Lisäksi ensimmäinen esimerkki voidaan yksinkertaistaa ja käyttää alkuperäisen lausekkeen (3N + 3), ekspression (3N) sijasta:

(3 x 0) + 0 \u003d 0 \u003d ei vaatimustenmukaisuus (3 x 1) + 0 \u003d 3 \u003d 3-и и илем (3 x 2) + 0 \u003d 6 \u003d 6. elementti jne.

Kuten näette, tulos on sama, mutta sinun ei tarvitse kirjoittaa "+3". Voimme myös käyttää negatiivisia arvoja ilmaisussa. Esimerkiksi 4N-1:

(4 x 0) - 1 \u003d -1 \u003d Ei kirjeenvaihtoa (4 x 1) - 1 \u003d 3 \u003d 3-eli elementti (4 x 2) - 1 \u003d 7 \u003d 7. elementti jne.

Käyttämällä negatiivisia arvoja N: n kanssa, näyttää hieman oudolta, koska negatiivisen tuloksen tapauksessa ei löydy vaatimustenmukaisuutta. Sinun täytyy jatkuvasti muuttaa ilmaisua lisäämällä positiivisia elementtejä. Kuten ilmenee, tämä lähestymistapa on erittäin kätevä valita ensimmäiset n elementit. Harkitse esimerkkiä "-N + 3":

0 + 3 \u003d 3 \u003d 3i elementti -1 + 3 \u003d 2 \u003d 2. elementti -2 + 3 \u003d 1 \u003d 1th elementti -3 + 3 \u003d 0 \u003d Ei ottelua

Risteys

nth-Child on yksi tyytymättömistä ominaisuuksista, jotka ovat täysin risti selain, lukuun ottamatta absoluuttinen nolla IE, jopa 8. versio. Siksi, kun kyse on sen käytöstä, jos odotettu tulos on jollakin tavalla visuaalinen tehoste (Esimerkiksi tietyn taulukon värityssivu), tämä on ihanteellinen lähestymistapa. Mutta ei todennäköisesti ole tarpeen käyttää sitä jotain tärkeämpää, mikä voi vaikuttaa esimerkiksi kerroksen oikeellisuudesta.

Tietenkin, jos käytät JQuerystä, sinun ei pitäisi huolehtia tästä, koska JQuery toimii myös Internet Explorerissa.

Ja lopuksi

Voit pelata eri sektorin ilmaisuilla