Pseudo-klasser gør det muligt at målrette elementer præcist baseret på deres rækkefølge i en container. Lad os undersøge nogle af de mest anvendte.

:first-child

Pseudo-klassen :first-child målretter et element, der er det første barn af dets forælder, uanset tag eller klassenavn. Overvej følgende eksempel for at tydeliggøre dette. Vi har et sæt elementer, og kun for det første element (det første <li>-element) ønsker vi at sætte dets color-egenskab til blue.

Output

Kun det første FAQ-element blev valgt, og specifikke stilarter blev anvendt.

:last-child

Pseudo-klassen :last-child retter sig mod det sidste barn af dets forælder, hvilket gør det muligt at ændre alle dets egenskaber. Lad os se et eksempel, der illustrerer, hvordan vi effektivt kan bruge denne pseudo-klasse.

Output

:nth-child

Pseudo-klassen :nth-child gør det muligt at vælge elementer baseret på deres placering blandt søskende. Du kan starte med enkel målretning ved at angive et tal. For eksempel:

Output

Accent-stilarter blev kun anvendt på de valgte elementer (2. og 3.).

Avanceret :nth-child

Til mere komplekse scenarier kan du bruge formlen an+b til at vælge flere elementer baseret på deres position. Sådan fungerer formlen:

• a bestemmer gentagelsesmønsteret (f.eks. hver 2., 3. barn osv.);
• b angiver startpunktet eller forskydningen for udvælgelsen;
• n fungerer som tæller, der øges ved hver iteration, startende fra 0.

Lad os se på nogle typiske selektorer.

/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
  /* Styles for every second element */
}

/* Selects the first three elements */
.item:nth-child(-n + 3) {
  /* Styles for the first three elements */
}

/* Selects all odd elements */
.item:nth-child(odd) {
  /* Styles for all odd elements */
}

/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
  /* Styles for the last three elements */
}

Bemærk

Det er ikke nødvendigt at huske alle selektorerne. Det kan altid søges på Google.

:not()

Pseudo-klassen :not() retter sig mod elementer, der ikke matcher en angivet selektor. For eksempel vil :not(p) vælge alle elementer undtagen <p>-elementer. Lad os se på nogle eksempler: