Forstå CSS :nth-child()-velgeren

Som alle CSS-velgere kan du bruke :nth-child() for å identifisere elementer på en nettside og bruke stiler på dem. Men denne velgeren lar deg begrense et sett med søsken basert på deres relative posisjon.

Velgeren støtter noen grunnleggende nøkkelord for vanlige tilfeller, men den gir også en kraftig mønstersamsvarende syntaks. Ved å bruke den kan du velge elementer basert på vanlige, repeterende mønstre eller mer komplekse definisjoner, basert på dine behov.

:nth-child()-velgersyntaksen

Som en CSS pseudoklassevelger, :nth-child()-syntaksen skiller seg fra andre velgere. Det tar et argument som et mønster for å matche elementer i et sett med søsken:

:nth-child(args) {
/*...*/
}

Hovedfokus er på argumentene i parentes. Disse argumentene definerer undersettet av elementer som skal velges.

Bruke søkeordverdier for vanlige tilfeller

Denne velgeren kan romme to søkeordverdier: merkelig og til og med. De er spesielt nyttige for styling av alternative rader i en tabell.

En enkel ordnet liste er et annet godt eksempel på når du kan bruke disse søkeordverdiene:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Bruker :nth-child (odde) velger, kan du endre fargen på hvert alternativt element:

:nth-child(odd) {
color: red;
}

Elementer begynner ved indeks 1, så det første elementet vises rødt, deretter det tredje, og så videre:

Funksjonell notasjon for mer fleksibilitet

Du kan bruke et enkelt heltall for å velge et individuelt element, slik:

li:nth-child(4) {
color: red;
}

I dette tilfellet samsvarer velgeren bare med det fjerde elementet i listen:

Denne syntaksen er et spesialtilfelle av den mer generelle funksjonelle syntaksen som velger elementer som samsvarer med et gitt mønster. Denne syntaksen er:

:nth-child(An+B) {
/*...*/
}

I denne notasjonen, EN er trinnstørrelsen. Dette betyr antall ganger velgeren beveger seg for å velge neste element. Den lar deg velge hvert annet element, hvert tredje element, etc. B er utgangspunktet der utvalget begynner.

Ta for eksempel argumentet 3n+1:

li:nth-child(3n+1) {
color: red;
}

Dette vil starte utvalget ved det første elementet og fortsette med hvert tredje element etter det:

Sammenlign dette med uttrykket 3n+2:

li:nth-child(3n+2) {
color:red;
}

Dette velger fortsatt hvert tredje element, men nå begynner det fra det andre elementet i listen:

Et annet interessant eksempel er :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Denne vil velge hvert element (n), fra det tredje (+3). Det vil se slik ut:

Du kan også bruke subtraksjon for å oppnå visse resultater:

li:nth-child(3n-1) {
color: red;
}

Dette eksemplet velger fortsatt hvert tredje element, men det starter fra "minus først". I realiteten betyr dette at den vil velge det andre elementet i listen, deretter det femte, og så videre:

Den av Syntaks

Du kan også bruke nøkkelordet av etterfulgt av en velger som et argument i :nth-child()-velgeren. Denne syntaksen lar deg begrense de mulige elementene som det vanlige mønsteret velger fra.

Tenk deg for eksempel at markeringen din er mer komplisert enn originalen:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Bruk nå :nth-child for å velge partallselementene fra settet med de med en bestemt klasse:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Legg merke til hvordan bare de fete partallene er røde:

Vurder også hvordan dette skiller seg fra li.new: nth-child (even) som retter seg mot .new-elementer, men bare hvis de er jevne. Dette vil være punkt 2 og 6 i eksemplet ovenfor.

Arbeide med :nth-child()-velgeren

Du kan oppnå unike design ved å bruke :nth-child()-velgeren. Du kan lage fargerike nettsteder og fremheve rader og kolonner i datatabeller. Å kombinere det med andre CSS-velgere vil hjelpe deg med å lage komplekse oppsett og design.