Valitsimien avulla voidaan CSS-muotoilla haluttuja osia esimerkiksi tekstistä.
Jonkin HTML-elementin sisällä olevien elementtien CSS-muotoilu, esimerkissä div:n sisällä on p-tekstielementtejä:
Tulos www-sivulla:
Valitsimen CSS-ohje:
div p {
color: RED;
}
HTML-koodaus:
<div>
<p> 1. Tekstiä p-elementillä div-elementissä </p>
<p> 2. Tekstiä p-elementillä div-elementissä </p>
<span><p> 3. Tekstiä p- ja span-elementeillä div-elementissä </p></span>
</div>
<p> 4. Tekstiä p-elementillä toteutettuna </p>
<p> 5. Tekstiä p-elementillä toteutettuna </p>
Valitsin HTML-elementin jälkeen olevien (valittujen) elementtien CSS-muotoilu, esimerkissä div-elmentille ja sen sisälle valitaan p-tekstielementtejä:
Tulos www-sivulla:
Valitsimen CSS-koodaus:
div > p{
color: RED;
}
div > h3{
color: GREEN;
}
HTML-koodaus:
<div>
<h3> 1. Otsikko h3-elementillä div-elementissä </h3>
<p> 2. Tekstiä p-elementillä div-elementissä </p>
<span><p> 3. Tekstiä p- ja span-elementeillä div-elementissä </p></span>
</div>
<h3> 4. Otsikko h3-elementillä toteutettuna </h3>
<p> 5. Tekstiä p-elementillä toteutettuna </p>
Valitsin HTML-elementin jälkeen ulkopuolella olevan (valitun) elementin CSS-muotoilu, esimerkissä div-elmentin jälkeen eli ulkopuolella oleva p-elementti muotoillaan:
Tulos www-sivulla:
Valitsimen CSS-koodaus:
div + p{
color: RED;
}
HTML-koodaus:
<div>
<h3> 1. Otsikko h3-elementillä div-elementissä </h3>
<p> 2. Tekstiä p-elementillä div-elementissä </p>
<span><p> 3. Tekstiä p- ja span-elementeillä div-elementissä </p></span>
</div>
<p> 4. Tekstiä p-elementillä toteutettuna </p>
<p> Ohje muotoilee div:n lopetusmerkin jälkeen seuraavan tekstielementin. </p>
Valitsin HTML-elementin jälkeen sen ulkopuolella olevien (valittujenn) elementiie CSS-muotoilu, esimerkissä div-elmentin jälkeen eli ulkopuolella olevat p-elementit muotoillaan:
Tulos www-sivulla:
Valitsimen CSS-koodaus:
div ~ p{
color: RED;
}
HTML-koodaus:
<div>
<h3> 1. Otsikko h3-elementillä div-elementissä </h3>
<code> 2. Tekstiä code-elementillä div-elementissä </code>
<span><p> 3. Tekstiä p- ja span-elementeillä div-elementissä </p></span>
</div>
<p> 4. Tekstiä p-elementillä toteutettuna </p>
<code> 5. Tekstiä jälleen code-elementillä </code>
<p> 5. Tekstiä p-elementillä toteutettuna </p>