Elementu guztiak formatoa hartzeko hautzatzaileak onartzen dituzte ; horrela zehaztapenak modu errazean burutzen dira. Hauek dira garatuko ditugun hautatzailerik garrantzitsuenak:
Class
hautatzailea Id
hautatzailea.class=“izena”
hautatzailearekin zehaztuta dauden elementuak hautatuko ditu, eta estiloa ezarriko die. .class
hautatzaile bera jar dakieke HTML elementuei (paragrafo bati, div
elementu bati…)
.class
hautatzaileak HTML elementu-tipo bakar batean izan dezake eragina. Kasu horretan, elementua jarriko dugu; ondoren, puntua (.), eta, azkenik, hautatzailearen izena:
p.arrosa{ background-color: pink; }
Adibidean, hautatzailea <div>
eta <h1>
elementuei jarri arren, ez du eraginik haietan.
HTML elementu batek bi hautatzaileren eragina izan dezake. Kasu horretan, hautatzaile bien atributuak izango ditu kontuan.
#id
hautatzaileak estiloa jarriko die id horrekin zehaztuta dauden elementu guztiei. Elementu batek ezin ditzake eraman bi #id
hautatzaile.
Elementu-hautatzaileak jarriz gero, horrelako elementu guztien ezaugarria aldatuko da. Adibidez:
p { color:blue; font-size:20px; }
--> paragrafoko elementu guztiak urdinak eta 20 pixelekoak izango dira.
Koma artean aipatutako elementu-hautatzaile guztiei ezaugarri berberak ezartzen zaizkie. Adibidez:
h1, h2, p { color: blue; }
--> h1, h2
eta p
elementuei letra urdina jarriko zaie.
Beraz, hainbat elementuri estilo bera ezartzeko, koma artean definituko ditugu.
elementu elementu hautatzailea beste elementu baten barruan dauden elementuak hautatzeko erabiltzen da. Beraz, lehenengo elementuaren barruan dauden elementuak bakarrik aldatuko dira. Adibidez:
header p { color: blue;}
--> letra urdina <header>
elementuaren barruan dauden paragrafoek (<p>
) bakarrik hartuko dute.