Pseudo-luokat mahdollistavat elementtien tarkan kohdistamisen niiden järjestyksen perusteella säiliössä. Tarkastellaan joitakin yleisimmin käytettyjä pseudo-luokkia.

:first-child

:first-child-pseudo-luokka kohdistaa elementtiin, joka on vanhempansa ensimmäinen lapsi riippumatta sen tagista tai luokan nimestä. Tarkastellaan seuraavaa esimerkkiä selventääksemme asiaa. Meillä on joukko elementtejä, ja haluamme asettaa vain ensimmäiselle elementille (ensimmäinen <li>-elementti) color-ominaisuuden arvoksi blue.

Tuloste

Vain ensimmäinen usein kysytty kysymys valittiin, ja siihen sovellettiin erityisiä tyylejä.

:last-child

Pseudo-luokka :last-child kohdistaa vanhemman viimeiseen lapseen, jolloin voimme muokata mitä tahansa sen ominaisuuksista. Tarkastellaan esimerkkiä, joka havainnollistaa tämän pseudo-luokan tehokasta käyttöä.

Tuloste

:nth-child

:nth-child-näennäisluokka mahdollistaa elementtien valitsemisen niiden sijainnin perusteella sisarusten joukossa. Voit aloittaa yksinkertaisella kohdistuksella määrittämällä numeron. Esimerkiksi:

Tuloste

Korostustyylit sovellettiin vain valittuihin elementteihin (2. ja 3.).

Kehittynyt :nth-child

Monimutkaisemmissa tilanteissa voit käyttää kaavaa an+b valitaksesi useita elementtejä niiden sijainnin perusteella. Näin kaava toimii:

• a määrittää toistuvuuskuvion (esim. joka toinen, kolmas lapsi jne.);
• b asettaa aloituskohdan tai siirtymän valinnalle;
• n toimii laskurina, joka kasvaa jokaisella iteraatiolla alkaen arvosta 0.

Tarkastellaan joitakin tyypillisiä valitsimia.

/* 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 */
}

Huomio

Kaikkia valitsimia ei tarvitse muistaa ulkoa. Niitä voi aina etsiä Googlesta.

:not()

:not()-pseudo-luokka kohdistaa elementteihin, jotka eivät vastaa määriteltyä valitsinta. Esimerkiksi :not(p) valitsee kaikki elementit paitsi <p>-elementit. Tarkastellaan joitakin esimerkkejä: