Useita valitsimia peräkkäin CSS:ssä
Valitaksesi elementin, joka täyttää useiden valitsimien ehdot samanaikaisesti, sinun tulee kirjoittaa nämä valitsimet peräkkäin ilman välilyöntejä.
Esimerkiksi seuraava valitsin valitsee elementin, jolla on sekä luokka bbb että luokka zzz:
.bbb.zzz {
}
Ja seuraava valitsin valitsee otsikon h2, jolla on sekä luokka bbb että luokka zzz:
h2.bbb.zzz {
}
Tällä tavalla voidaan muodostaa mielivaltaisia valitsinrakenteita. Käytettyjen valitsimien järjestyksellä ei ole merkitystä, paitsi säännön osalta, että elementtityypin valitsimet tulee sijoittaa alkuun.
Eli esimerkiksi valitsimet .bbb.zzz ja .zzz.bbb ovat täysin vastaavia.
Lisäksi valitsimia voidaan muodostaa käyttämällä id:tä, esimerkiksi: #elem.eee, tai h2#elem.eee, tai h2.eee#elem ja niin edelleen.
Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:
.bbb.zzz {
color: red;
}
Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:
h2.bbb.zzz {
color: red;
}
Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:
#elem.bbb {
color: red;
}
Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:
#elem.bbb.zzz {
color: red;
}
Kerro, mitä alla olevan koodin valitsin valitsee. Kirjoita sitten HTML-koodi, joka sopii tähän valitsimeen. Tässä on koodi valitsimella:
h2#elem.bbb {
color: red;
}
