Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Rakennepseudoluokkien Harjoittelu | CSS-laatikkomalli ja Elementtien Välistys
Learn
Kurssit
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
CSS:n Perusteet

bookHaaste: Rakennepseudoluokkien Harjoittelu

Tehtävä

Työskentelemme joukon elementtien kanssa, ja tavoitteena on harjoitella erilaisten värien käyttämistä rakenteellisten pseudoluokkien avulla. Tehtäväsi on seuraava:

  • Käytä väriä red ensimmäiseen elementtiin rakenteellisen pseudoluokan avulla.
  • Käytä väriä blue viimeiseen elementtiin rakenteellisen pseudoluokan avulla.
  • Käytä väriä green joka toiseen elementtiin rakenteellisen pseudoluokan avulla.
index.html

index.html

index.css

index.css

copy
  • :first-child: Kohdistaa vanhemman ensimmäiseen lapseen.
  • :last-child: Kohdistaa vanhemman viimeiseen lapseen.
  • :nth-child(): Kohdistaa tiettyyn lapseen vanhemman sisällä sen sijainnin perusteella. Esimerkiksi joka toisen listaelementin (2, 4, 6, jne.) valitsemiseen voit käyttää :nth-child(2n).
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Suggested prompts:

Can you show me an example of how to use these pseudo-classes in CSS?

What kind of elements are we applying these styles to?

Can you explain how :nth-child(2n) works in more detail?

bookHaaste: Rakennepseudoluokkien Harjoittelu

Pyyhkäise näyttääksesi valikon

Tehtävä

Työskentelemme joukon elementtien kanssa, ja tavoitteena on harjoitella erilaisten värien käyttämistä rakenteellisten pseudoluokkien avulla. Tehtäväsi on seuraava:

  • Käytä väriä red ensimmäiseen elementtiin rakenteellisen pseudoluokan avulla.
  • Käytä väriä blue viimeiseen elementtiin rakenteellisen pseudoluokan avulla.
  • Käytä väriä green joka toiseen elementtiin rakenteellisen pseudoluokan avulla.
index.html

index.html

index.css

index.css

copy
  • :first-child: Kohdistaa vanhemman ensimmäiseen lapseen.
  • :last-child: Kohdistaa vanhemman viimeiseen lapseen.
  • :nth-child(): Kohdistaa tiettyyn lapseen vanhemman sisällä sen sijainnin perusteella. Esimerkiksi joka toisen listaelementin (2, 4, 6, jne.) valitsemiseen voit käyttää :nth-child(2n).
index.html

index.html

index.css

index.css

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 6
some-alt