Forstå CSS :nth-child()-velgeren

Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

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.

facebook messenger hacket hvordan fikse

MUO Video av dagen RULL FOR Å FORTSETTE MED INNHOLD

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 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

Bruker :nth-child(oddelig) 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.

beste innspillingsstudio -app for android

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:

Syntaks for

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.

systemtråd unntak ikke håndtert windows 10

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

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

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

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.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.