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

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

Väljaren erbjuder både grundläggande nyckelordsalternativ och en avancerad mönsterbaserad syntax för att tillgodose olika krav. Du kan välja mellan enkla urval som följer återkommande mönster eller använda komplicerade specifikationer för att tillgodose dina särskilda behov.

Syntax för väljaren :nth-child()

Som en CSS-pseudoklassväljare skiljer sig syntaxen :nth-child() från andra väljare genom ett argument som fungerar som ett mönster för identifiering av element inom en grupp av syskonelement.

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

Den primära tonvikten ligger på innehållet inom parenteserna, som avgränsar en specifik delmängd av element som ska väljas från.

Använda nyckelordsvärden för vanliga fall

Denna särskilda väljare är utformad för att fungera med två olika nyckelordsvärden, nämligen “odd” och “even”. Dessa värden visar sig vara mycket effektiva när det gäller att implementera alternativ radstyling i en tabell.

En enkel uppräkning fungerar som ett illustrativt exempel på en omständighet där man kan använda dessa nyckelordsbeteckningar:

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

Med hjälp av väljaren :nth-child(odd) kan man ändra färgtonen för varje efterföljande listobjekt med ett udda index:

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

Posterna är numrerade från 1, så att den första posten visas i en röd färg, följt av den tredje posten och därefter varje efterföljande tredje post.

Funktionell notation för större flexibilitet

Man kan använda ett enda positivt heltal för att välja en specifik komponent genom att använda det på följande sätt:

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

I det här fallet gäller väljaren endast det fjärde elementet i den angivna listan:

Denna speciella syntax handlar om att välja element utifrån ett specifikt mönster, och faller under den bredare kategorin av funktionella syntaxer som utför denna funktion.

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

I denna speciella notation betecknar vi med “A” inkrementet eller stegstorleken, som anger den frekvens med vilken väljaren avancerar för att välja det efterföljande objektet. Med detta tillvägagångssätt kan man välja att välja objekt med jämna mellanrum, t.ex. vartannat objekt eller vart tredje objekt osv.Omvänt representerar “B” den startpunkt från vilken urvalet påbörjas.

Ta till exempel argumentet 3n\\+1:

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

Urvalsprocessen inleds med det första elementet och fortsätter sedan genom att hoppa över två element och gå vidare till nästa efterföljande element:

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

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

Den uppdaterade koden börjar välja objekt från det andra elementet i listan istället för att börja med det första, samtidigt som den fortfarande följer mönstret att välja vart tredje objekt.

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

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

Den givna instruktionen handlar om att välja en serie objekt, där man börjar med det tredje elementet och fortsätter till slutet. Den resulterande sekvensen bör ha den form som visas nedan:

Man kan också använda subtraktion för att uppnå specifika resultat.

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

Exemplet avviker från konventionell praxis genom att urvalsprocessen inleds från det negativa indexet, vilket resulterar i valet av det andra elementet i sekvensen följt av den femte och efterföljande termer:

The of Syntax

Pseudoklassen :nth-child() tillåter användning av nyckelordet “of” tillsammans med en selector, som fungerar som ett argument inom dess parenteser. Genom att använda denna syntax kan man begränsa antalet element som det grundläggande mönstret kan välja från och därigenom öka specificiteten och precisionen i urvalsprocessen.

Tänk på ett scenario där markeringen är intrikat jämfört med den ursprungliga versionen:

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

För att rikta in element med en specifik klass och välja vartannat objekt i den gruppen med CSS, kan man använda pseudoklassen “:nth-child” tillsammans med den önskade klassväljaren. Detta möjliggör exakt urval och modifiering av specifika element baserat på deras position inom sekvensen av matchade element.

 .new {
    font-weight: bold;
}

li:nth-child(even of.new) {
    color: red;
} 

Lägg märke till att endast de fetmarkerade posterna med udda nummer visas i rött:

Tänk också på skillnaden mellan li.new:nth-child(even) och :target , vilka väljare som riktar in sig på .new element när de är jämna eller innehåller ett child element med ID “moredetails”, vilket visades i vårt tidigare exempel. Det förstnämnda gäller för instanserna 2 och 6 i den medföljande illustrationen.

Arbeta med väljaren :nth-child()

Användningen av väljaren :nth-child() gör det möjligt att skapa en distinkt estetik genom implementering av livfulla nyanser över webbplatsinnehåll, vilket omfattar accentuering av enskilda rader och kolumner i tabellformade datastrukturer. Genom att integrera denna selektor med ytterligare CSS-selektorer kan man dessutom skapa komplicerade visuella scheman och konfigurationer genom att utnyttja deras kombinerade kapacitet.