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 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öä.

index.html

styles.css

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:

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. 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ä:

index.html

index.css

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

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

3. Miten `last-child`-pseudoluokka toimii?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 3. Luku 5

Kysy tekoälyä

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

Suggested prompts:

Can you explain how the :not() pseudo-class works with multiple selectors?

Could you provide more examples of using :not() in CSS?

What are some common use cases for the :not() pseudo-class?

Awesome!

Completion rate improved to 2.56

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 usein kysytty kysymys 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. Niitä voi aina etsiä Googlesta.

:not()

index.html

index.css

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

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

3. Miten `last-child`-pseudoluokka 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 joukosta elementtejä?

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

3. Miten last-child-pseudoluokka toimii?

Awesome!

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 joukosta elementtejä?

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

3. Miten last-child-pseudoluokka toimii?

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

3. Miten `last-child`-pseudoluokka toimii?

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

3. Miten `last-child`-pseudoluokka toimii?