CSS-valitsimet (selectors) ovat avainasemassa tyylien määrittämisessä. Valitsimilla voidaan valita HTML-elementtejä ja soveltaa niihin haluttuja tyylikomponentteja. Viime moduulissa käsittelimme luokat, mutta luokat ovat vain yksi lukuisista eri tavoista valita HTML-elementtejä CSS:ssä. Tässä on muutamia yleisiä CSS-valitsimia ja niiden käyttötarkoituksia:

Elementin valitsimella valitaan kaikki tietyn HTML-elementin esiintymät. Esimerkiksi seuraava koodinpätkä valitsee kaikki p -elementit ja määrittelee niille tekstin värin punaiseksi:

Luokan valitsimella valitaan kaikki tietyn luokan sisältävät elementit. Luokan nimi kirjoitetaan pisteen jälkeen. Esimerkiksi seuraava koodinpätkä valitsee kaikki elementit, joilla on luokka otsikko ja määrittelee niille fonttikoon 20 pikseliä:

Id-valitsimella valitaan yksittäinen elementti sen id-attribuutin perusteella. Id-nimi kirjoitetaan hash-merkin jälkeen. Esimerkiksi seuraava koodinpätkä valitsee elementin, jolla on id otsikko ja määrittelee sen taustavärin siniseksi:

Yhdistelmävalitsimella valitaan elementit, jotka täyttävät useamman ehdotuksen. Esimerkiksi seuraava koodinpätkä valitsee kaikki a -elementit, jotka ovat luokassa linkki:

Jälkeläisvalitsimella valitaan elementit, jotka ovat toisen elementin alaisuudessa. Jälkeläisvalitsin koostuu kahdesta erillisestä valitsimesta, jotka erotetaan välilyönnillä. Esimerkiksi seuraava koodinpätkä valitsee kaikki ul -elementit, jotka ovat div -elementin sisällä:

Rinnakkaisvalitsimella valitaan elementit, jotka ovat samalla tasolla ja jakavat saman vanhempielementin. Rinnakkaisvalitsin koostuu kahdesta erillisestä valitsimesta, jotka erotetaan merkillä +. Esimerkiksi seuraava koodinpätkä valitsee kaikki p -elementit, jotka seuraavat h1 -elementtiä:

Universaalivalitsimella valitaan kaikki elementit. Universaalivalitsin kirjoitetaan merkillä *. Esimerkiksi seuraava koodinpätkä määrittelee marginaalin ja paddingin nollaksi kaikille elementeille:

Attribuuttivalitsimella valitaan elementit, joilla on tietty attribuutti tai attribuuttiarvo. Esimerkiksi seuraava koodinpätkä valitsee kaikki input -elementit, joilla on type="text" -attribuutti:

Pseudoluokka-valitsimella valitaan elementit, jotka ovat tietyn tilan tai toiminnan alla. Pseudoluokat kirjoitetaan kaksoispisteellä erotettuna valitsimen jälkeen. Esimerkiksi seuraava koodinpätkä valitsee kaikki a -elementit, jotka ovat aktiivisia (eli käyttäjä klikannut linkkiä):

Pseudoelementti-valitsimella luodaan näkymätön elementti, johon voidaan soveltaa tyylikomponentteja. Pseudoelementit kirjoitetaan kaksoispisteellä erotettuna valitsimen jälkeen. Esimerkiksi seuraava koodinpätkä lisää pisteet li -elementtien edelle:

Last-child-valitsimella valitaan viimeinen lapsielementti tietyn vanhempielementin sisällä. Esimerkiksi seuraava koodinpätkä määrittelee p -elementin marginaalin nollaksi vain silloin, kun se on viimeinen lapsielementti div -elementissä:

Nth-child-valitsimella valitaan tietty lapsielementti tietyn vanhempielementin sisällä. Esimerkiksi seuraava koodinpätkä määrittelee ensimmäisen p -elementin marginaalin nollaksi div -elementin sisällä:

Tässä on yksinkertainen esimerkki HTML-dokumentista, joka käyttää kaikkia yllä mainittuja CSS-valitsimia:

CSS-valitsimet (selectors) ovat avainasemassa tyylien määrittämisessä. Valitsimilla voidaan valita HTML-elementtejä ja soveltaa niihin haluttuja tyylikomponentteja. Viime moduulissa käsittelimme luokat, mutta luokat ovat vain yksi lukuisista eri tavoista valita HTML-elementtejä CSS:ssä. Tässä on muutamia yleisiä CSS-valitsimia ja niiden käyttötarkoituksia:

## Elementtivalitsin

Elementin valitsimella valitaan kaikki tietyn HTML-elementin esiintymät. Esimerkiksi seuraava koodinpätkä valitsee kaikki p -elementit ja määrittelee niille tekstin värin punaiseksi:

```css
p {
  color: red;
}
```

---

## 
Luokkavalitsin

Luokan valitsimella valitaan kaikki tietyn luokan sisältävät elementit. Luokan nimi kirjoitetaan pisteen jälkeen. Esimerkiksi seuraava koodinpätkä valitsee kaikki elementit, joilla on luokka otsikko ja määrittelee niille fonttikoon 20 pikseliä:

```css
.otsikko {
  font-size: 20px;
}
```

---

## Id-valitsin

Id-valitsimella valitaan yksittäinen elementti sen id-attribuutin perusteella. Id-nimi kirjoitetaan hash-merkin jälkeen. Esimerkiksi seuraava koodinpätkä valitsee elementin, jolla on id otsikko ja määrittelee sen taustavärin siniseksi:

```css
#otsikko {
  background-color: blue;
}
```

---

## Yhdistelmävalitsin

Yhdistelmävalitsimella valitaan elementit, jotka täyttävät useamman ehdotuksen. Esimerkiksi seuraava koodinpätkä valitsee kaikki a -elementit, jotka ovat luokassa linkki:

```css
a.linkki {
  text-decoration: none;
  color: blue;
}
```

---

## Jälkeläisvalitsin

Jälkeläisvalitsimella valitaan elementit, jotka ovat toisen elementin alaisuudessa. Jälkeläisvalitsin koostuu kahdesta erillisestä valitsimesta, jotka erotetaan välilyönnillä. Esimerkiksi seuraava koodinpätkä valitsee kaikki ul -elementit, jotka ovat div -elementin sisällä:

```css
div ul {
  margin: 0;
  padding: 0;
}
```

---

## Rinnakkaisvalitsin

Rinnakkaisvalitsimella valitaan elementit, jotka ovat samalla tasolla ja jakavat saman vanhempielementin. Rinnakkaisvalitsin koostuu kahdesta erillisestä valitsimesta, jotka erotetaan merkillä +. Esimerkiksi seuraava koodinpätkä valitsee kaikki p -elementit, jotka seuraavat h1 -elementtiä:

```css
h1 + p {
  font-size: 16px;
}
```

---

## Universaalivalitsin

Universaalivalitsimella valitaan kaikki elementit. Universaalivalitsin kirjoitetaan merkillä \*. Esimerkiksi seuraava koodinpätkä määrittelee marginaalin ja paddingin nollaksi kaikille elementeille:

```css
* {
  margin: 0;
  padding: 0;
}
```

---

## Attribuuttivalitsin

Attribuuttivalitsimella valitaan elementit, joilla on tietty attribuutti tai attribuuttiarvo. Esimerkiksi seuraava koodinpätkä valitsee kaikki input -elementit, joilla on type="text" -attribuutti:

```css
input[type="text"] {
  width: 100%;
}
```

---

## Pseudoluokka-valitsin

Pseudoluokka-valitsimella valitaan elementit, jotka ovat tietyn tilan tai toiminnan alla. Pseudoluokat kirjoitetaan kaksoispisteellä erotettuna valitsimen jälkeen. Esimerkiksi seuraava koodinpätkä valitsee kaikki a -elementit, jotka ovat aktiivisia (eli käyttäjä klikannut linkkiä):

```css
a:active {
  color: red;
}
```

---

## Pseudoelementti-valitsin

Pseudoelementti-valitsimella luodaan näkymätön elementti, johon voidaan soveltaa tyylikomponentteja. Pseudoelementit kirjoitetaan kaksoispisteellä erotettuna valitsimen jälkeen. Esimerkiksi seuraava koodinpätkä lisää pisteet li -elementtien edelle:

```css
li:before {
  content: "•";
  margin-right: 5px;
}
```

---

## Last-child-valitsin

Last-child-valitsimella valitaan viimeinen lapsielementti tietyn vanhempielementin sisällä. Esimerkiksi seuraava koodinpätkä määrittelee p -elementin marginaalin nollaksi vain silloin, kun se on viimeinen lapsielementti div -elementissä:

```css
div p:last-child {
  margin-bottom: 0;
}
```

---

## Nth-child-valitsin

Nth-child-valitsimella valitaan tietty lapsielementti tietyn vanhempielementin sisällä. Esimerkiksi seuraava koodinpätkä määrittelee ensimmäisen p -elementin marginaalin nollaksi div -elementin sisällä:

```css
div p:nth-child(1) {
  margin-top: 0;
}
```

---

## Harjoittele

Tässä on yksinkertainen esimerkki HTML-dokumentista, joka käyttää kaikkia yllä mainittuja CSS-valitsimia:

@embed 200d21a86484


CSS Valitsimet

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

CSS Valitsimet

Elementtivalitsin

Hakkeroinnin oppiminen alkaa tästä