Hvordan funker nth-child i CSS3?

Vi som jobber med CSS har mange kule verktøy som ikke kommer til sin rett, på grunn av dårlig støtte i alt annet enn de siste nettleserene. Det kan gå flere år før nye verktøy kan brukes i produksjon. nth-child har vært et av disse verktøyene, som først nå begynner begynner å stige ut av eksperimentell bruk og inn i større prosjekter. Fordi nth-child ikke er like umiddelbart intuitiv som det vi er vant med fra andre deler av CSS, skriver jeg dette innlegget.

Med nth-child kan du treffe alle disse elementene, uten tillegg i markup.

Hva gjør nth-child?

Fra dokumentasjonen:

“The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.”

nth-child lar oss finne spesifikke elementer med CSS, basert på hvilken rekkefølge de forekommer i forelderelementet, uten å trenge klasser eller IDer.

Den enkleste formen av denne nth-child i bruk, er et enkelt tall. Følgende selector vil treffe bare det femte elementet:

foo:nth-child(5) { /**/ }

Du kan også treffe annethvert element, ved å bruke odd eller even, selvforklarende:

foo:nth-child(odd) { /* Alle element som utgjør et oddetall i rekken */ }
foo:nth-child(even) { /* Alle element som utgjør et partall i rekken*/ }

Dette er kult i seg selv, men nth-child kan gjøre mye mer:

foo:nth-child(3n) { /* Tredjehvert element */ }
foo:nth-child(3n+5) { /* Tredjehvert element, fra og med nummer fem */ }
foo:nth-child(-n+3) { /* Bare de tre første elementene */ }

Slik funker det: an+b, eller (a*n) + b

Dette uttrykket forteller nettleseren hvilke elementer som skal berøres av regelen.

Det første man må forstå, er at N representerer alle naturlige tall (0, 1, 2, 3, 4, +). Regelen repeteres for hvert tall, helt til det ikke er flere elementer å ta av.

Hvis vi sier at a = 3 og b = 5, så treffer vi følgende elementer:

(a * n ) + b = x
(3 * 0) + 5 = 5
(3 * 1) + 5 = 8
(3 * 2) + 5 = 11

Her vi vi treffe det femte, åttende og ellevte elementet. Videre treffer vi 14, 17, 20 og 23, avhengig av hvor mange elementer man har.

Ønsker du å treffe annethvert element etter de ti første:

foo:nth-child(2n+10) { /* 10, 12, 14, 16 */ }
foo:nth-child(2n+11) { /* 11, 13, 15, 17 */ }

For å få et bedre inntrykk av hvordan dette funker, ta en titt på denne dingsen av Lea Verou.

Ulike bruksområder

Rutenett

Alle som har bygget nettsteder en stund, har møtt utfordringen med jevn fordeling av spalter og marger. Har du behov for marger mellom elementene i et rutenett, men uten marger i ytterkantene, sitter du fint i det med det vi har hatt av CSS hittil. Mange rammeverk har løst problemet egne klasser for å indikere første og siste element i hver rekke, slik at man kan fjerne henholdsvis venstre og høyre marg.

Med nth-child slipper du sølete løsninger i markup, og kan definere ulike egenskaper for elementer avhengig av hvilket nummer de utgjør i rekken.

foo:nth-child(4n+1) { margin-left:0; } /* 1, 5, 11*/
foo:nth-child(4n) { margin-right:0; } /* 4, 8, 12 */

Disse reglene vil treffe henholdsvis første og fjerde element i en rekke.

Spaltesystemer og distribusjon av kolonner

Det er ikke uvanlig å fremheve de ferskeste innleggene i en publikasjon på web. Dette gjøres ofte ved at man lar de nyeste innleggene oppta større plass, og ved hjelp av egne stilmaler for disse elementene. Som med uniforme spaltesystemer, har vi lenge vært avhengig av egne klasser for å løse dette.

Med nth-child, kan du plukke ut innlegg fra rekkefølgen, og angi alternative stilmaler uten å være avhengig av forandringer i markup.

foo:nth-child(-n+3) { /* Treffer elementer 1, 2 og 3 */ }

Her kan man også være kreative, og oppnå ganske komplekse layouts, ved å kombinere flere regler. Merk at å basere et layout på nth-child relativt modig, da eldre versjoner av IE ikke har støtte. Samtidig mister man noe fleksiblitet, så her må man avveie fordelene mot hverandre.

Tabeller og lister

Å fargelegge annenhver rad i en større tabell kan dramatisk heve leseligheten. Dette har lenge blitt løst med class=”alternate” eller tilsvarende. Med nth-child kan tabellen være fri for klasser med utelukkende dekorativ/visuell funksjon. Her er det utallige måter å bruke dette på.

Andre bruksområder?

Kom gjerne med innspill!

Browserstøtte

Ikke uventet har nth-child heller dårlig støtte i Internet Explorer. I versjon 7 og 8 er støtten ikke-eksisterende. Heldigvis finnes det omveier, ved hjelp av Selectivizr (4kb) og et javascript-bibliotek.

Håper dette var oppklarende for noen! Ta også en titt på nth-of-type, first-child og last-child, som er i samme familie.

Finn meg gjerne på Twitter: @asgeirhoem