Förstå CSS :nth-child()-väljaren

Som alla CSS-väljare kan du använda :nth-child() för att identifiera element på en webbsida och tillämpa stilar på dem. Men den här väljaren låter dig begränsa en uppsättning syskon baserat på deras relativa position.

Väljaren stöder några grundläggande nyckelord för vanliga fall, men den ger också en kraftfull syntax för mönstermatchning. Med hjälp av det kan du välja element baserat på vanliga, upprepade mönster eller mer komplexa definitioner, baserat på dina behov.

:nth-child() väljarsyntaxen

Som en CSS pseudoklassväljare, :nth-child()-syntaxen skiljer sig från andra väljare. Det tar ett argument som ett mönster för att matcha element i en uppsättning syskon:

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

Huvudfokus ligger på argumenten inom parentes. Dessa argument definierar delmängden av element som ska väljas.

Använda nyckelordsvärden för vanliga fall

Den här väljaren kan ta emot två sökordsvärden: udda och även. De är särskilt användbara för utforma alternativa rader i en tabell.

En enkel ordnad lista är ett annat bra exempel på när du kan använda dessa sökordsvärden:

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

Använda :nth-child (udda) väljare kan du ändra färgen på varje alternativ post:

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

Objekt börjar vid index 1, så det första objektet kommer att visas rött, sedan det tredje och så vidare:

Funktionell notation för mer flexibilitet

Du kan använda ett enda heltal för att välja ett enskilt element, så här:

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

I det här fallet matchar väljaren endast den fjärde posten i listan:

Denna syntax är ett specialfall av den mer allmänna funktionella syntaxen som väljer objekt som matchar ett givet mönster. Denna syntax är:

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

I denna notation, A är stegstorleken. Detta betyder hur många gånger väljaren rör sig för att välja nästa objekt. Det låter dig välja vartannat objekt, vart tredje objekt, etc. B är startpunkten där urvalet börjar.

Ta till exempel argumentet 3n+1:

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

Detta startar urvalet vid det första objektet och fortsätter med vart tredje objekt efter det:

Jämför detta med uttrycket 3n+2:

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

Detta väljer fortfarande vart tredje objekt, men nu börjar det från det andra objektet i listan:

Ett annat intressant exempel är :nth-child (n+3):

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

Den här väljer varje post (n), med början från den tredje (+3). Det kommer att se ut så här:

Du kan också använda subtraktion för att uppnå vissa resultat:

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

Det här exemplet väljer fortfarande vart tredje objekt, men det börjar från "minus först". I själva verket betyder det att det kommer att välja det andra objektet i listan, sedan det femte, och så vidare:

Den av Syntax

Du kan också använda nyckelordet av följt av a väljare som ett argument i väljaren :nth-child(). Denna syntax låter dig begränsa de möjliga objekt som det vanliga mönstret väljer från.

Tänk dig till exempel att din uppmärkning är mer komplicerad än originalet:

<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>

Använd nu :nth-child för att välja de jämna objekten från uppsättningen av de med en specifik klass:

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

Lägg märke till hur bara de jämna numrerade fetstilarna är röda:

Tänk också på hur detta skiljer sig från li.new: nth-child (jämn) som riktar sig till .new element, men bara om de är jämna. Detta skulle vara punkterna 2 och 6 i exemplet ovan.

Arbeta med :nth-child()-väljaren

Du kan skapa unika mönster med hjälp av väljaren :nth-child(). Du kan skapa färgglada webbplatser och markera rader och kolumner i datatabeller. Att kombinera det med andra CSS-väljare hjälper dig att skapa komplexa layouter och design.