Denne CSS-funktion er især nyttig til styling af tabeller og komplekse lister.
Som alle CSS-vælgere kan du bruge :nth-child() til at identificere elementer på en webside og anvende stilarter på dem. Men denne vælger giver dig mulighed for at indsnævre et sæt søskende baseret på deres relative position.
Vælgeren understøtter nogle grundlæggende nøgleord til almindelige sager, men den giver også en kraftfuld mønstermatchende syntaks. Ved at bruge det kan du vælge elementer baseret på regelmæssige, gentagne mønstre eller mere komplekse definitioner, baseret på dine behov.
:nth-child()-vælgersyntaksen
Som en CSS pseudo-klasse vælger, :nth-child()-syntaksen adskiller sig fra andre vælgere. Det tager et argument som et mønster for at matche elementer i et sæt søskende:
:nth-child(args) {
/*...*/
}Hovedfokus er på argumenterne i parentes. Disse argumenter definerer delmængden af elementer, der skal vælges.
Brug af søgeordsværdier til almindelige tilfælde
Denne vælger kan rumme to søgeordsværdier: ulige og også selvom. De er særligt anvendelige til styling af alternative rækker i en tabel.
En simpel ordnet liste er et andet godt eksempel på, hvornår du kan bruge disse søgeordsværdier:
<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>Bruger :nth-child (ulige) vælger, kan du ændre farven på hvert alternativt element:
:nth-child(odd) {
color: red;
}Elementer begynder ved indeks 1, så det første element vises rødt, derefter det tredje, og så videre:
Funktionel notation for mere fleksibilitet
Du kan bruge et enkelt heltal til at vælge et individuelt element, sådan her:
li:nth-child(4) {
color: red;
}I dette tilfælde matcher vælgeren kun det fjerde punkt på listen:
Denne syntaks er et specialtilfælde af den mere generelle funktionelle syntaks, som udvælger elementer, der matcher et givet mønster. Denne syntaks er:
:nth-child(An+B) {
/*...*/
}I denne notation, EN er trinstørrelsen. Dette betyder det antal gange, vælgeren bevæger sig for at vælge det næste element. Det giver dig mulighed for at vælge hvert andet element, hvert tredje element osv. B er udgangspunktet, hvor valget begynder.
Tag for eksempel argumentet 3n+1:
li:nth-child(3n+1) {
color: red;
}Dette starter udvælgelsen ved det første punkt og fortsætter med hvert tredje punkt derefter:
Sammenlign dette med udtrykket 3n+2:
li:nth-child(3n+2) {
color:red;
}Dette vælger stadig hvert tredje punkt, men nu begynder det fra det andet punkt på listen:
Et andet interessant eksempel er :nth-child (n+3):
li:nth-child(n+3) {
color: red;
}Denne vil vælge hvert punkt (n), begyndende fra det tredje (+3). Det vil se sådan ud:
Du kan også bruge subtraktion til at opnå visse resultater:
li:nth-child(3n-1) {
color: red;
}Dette eksempel vælger stadig hvert tredje element, men det starter fra "minus først". Det betyder faktisk, at det vil vælge det andet punkt på listen, derefter det femte og så videre:
Den af Syntaks
Du kan også bruge søgeordet af efterfulgt af en vælger som et argument i :nth-child()-vælgeren. Denne syntaks lader dig indsnævre de mulige elementer, som det almindelige mønster vælger fra.
Forestil dig for eksempel, at din markering er mere kompliceret end 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>Brug nu :nth-child til at vælge de lige elementer fra sættet af dem med en bestemt klasse:
.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}
Bemærk, hvordan kun de lige numre med fed skrift er røde:
Overvej også, hvordan dette adskiller sig fra li.new: nth-child (lige) som retter sig mod .new elementer, men kun hvis de er lige. Dette ville være punkt 2 og 6 i ovenstående eksempel.
Arbejde med :nth-child()-vælgeren
Du kan opnå unikke designs ved hjælp af :nth-child() vælgeren. Du kan oprette farverige websteder og fremhæve rækker og kolonner i datatabeller. At kombinere det med andre CSS-vælgere vil hjælpe dig med at skabe komplekse layouts og designs.