Oppiskele Rakenteellisten ja Toiminnallisten Pseudoluokkien Käyttö | CSS-laatikkomalli ja Elementtien Välistys

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.

index.html

styles.css

Tuloste

Vain ensimmäinen UKK-alkio valittiin, ja siihen sovellettiin erityisiä tyylejä.

:last-child

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

index.html

styles.css

Tuloste

:nth-child

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

index.html

styles.css

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. Voimme aina etsiä niitä 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ä:

index.html

index.css

1. Mitä pseudoluokkaa voidaan käyttää valitsemaan ensimmäinen elementti elementtijoukosta?

2. Mihin tarkoitukseen `nth-child`-pseudoluokkaa käytetään?

3. Miten `last-child`-pseudo-luokka toimii?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 5

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

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

:first-child

index.html

styles.css

Tuloste

Vain ensimmäinen UKK-alkio valittiin, ja siihen sovellettiin erityisiä tyylejä.

:last-child

index.html

styles.css

Tuloste

:nth-child

index.html

styles.css

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. Voimme aina etsiä niitä Googlesta.

:not()

index.html

index.css

1. Mitä pseudoluokkaa voidaan käyttää valitsemaan ensimmäinen elementti elementtijoukosta?

2. Mihin tarkoitukseen `nth-child`-pseudoluokkaa käytetään?

3. Miten `last-child`-pseudo-luokka toimii?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 5

Rakenteellisten ja Toiminnallisten Pseudoluokkien Käyttö

:first-child

Tuloste

:last-child

Tuloste

:nth-child

Tuloste

Kehittynyt :nth-child

:not()

1. Mitä pseudoluokkaa voidaan käyttää valitsemaan ensimmäinen elementti elementtijoukosta?

2. Mihin tarkoitukseen nth-child-pseudoluokkaa käytetään?

3. Miten last-child-pseudo-luokka toimii?

Rakenteellisten ja Toiminnallisten Pseudoluokkien Käyttö

:first-child

Tuloste

:last-child

Tuloste

:nth-child

Tuloste

Kehittynyt :nth-child

:not()

1. Mitä pseudoluokkaa voidaan käyttää valitsemaan ensimmäinen elementti elementtijoukosta?

2. Mihin tarkoitukseen nth-child-pseudoluokkaa käytetään?

3. Miten last-child-pseudo-luokka toimii?

2. Mihin tarkoitukseen `nth-child`-pseudoluokkaa käytetään?

3. Miten `last-child`-pseudo-luokka toimii?

2. Mihin tarkoitukseen `nth-child`-pseudoluokkaa käytetään?

3. Miten `last-child`-pseudo-luokka toimii?