CSS Valitsimet

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:

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

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

#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:

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

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

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:

* {
  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:

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

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:

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

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

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

Harjoittele

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