Batzuetan, komeni da estilo guztiak kanpoko artxibo batean adieraztea eta, gero, artxibo hori behar duen dokumentu bakoitzetik kargatzea, baina mekanismo desberdinak ezartzera behartzen gaitu, CSS arauen eta horiek ukituko dituzten dokumentuko elementuen arteko erlazioa ezartzeko.
CSS erregela batek ukituko dituen elementuak hautatzeko hainbat metodo daude. Aurreko adibideetan elementuaren izena erabili dugu, baina id eta class atributuen balioak ere erabil ditzakegu elementu bakar bat edo elementu multzo bat erreferentziatzeko, baita konbinatzeko ere, hautatzaile espezifikoagoak eraikitzeko.
Izenak
Elementuaren izena hautatzaile gisa duen erregela batek dokumentuan aurkitutako mota horretako elementu guztiei eragiten die. Aurreko adibideetan p izena erabiltzen dugu elementuak aldatzeko <p>, baina izen hori alda dezakegu nahi dugun dokumentuan edozein elementurekin lan egiteko. Horren ordez span izena adierazten badugu, adibidez, testu guztiak < span> elementuen barruan aldatuko dira.
span {
font-size: 20px;
}
<span> elementua beren izenaren arabera erreferentziatzen.
Izen desberdinak dituzten elementuei estilo berberak esleitu nahi badizkiegu, izenak koma batez bereiz ditzakegu. Hurrengo adibidean, arauak dokumentuan aurkitutako <p> eta <span> elementu guztiei eragiten die.
Halaber, elementu jakin baten barruan dauden elementuak bakarrik aipa ditzakegu, hautatzaileak espazio batez bereizita zerrendatuz. Hautagailu-mota horiei ondorengotza-hautatzaile esaten zaie, beste elementu batzuen barruko elementuei eragiten dietelako, hierarkian duten lekua kontuan hartu gabe.
main p {
font-size: 20px;
}
Hautatzaileak konbinatzen.
Goiko erregelak <p> elementu baten barruan <main> dauden elementuei bakarrik eragiten die, bai zuzeneko eduki gisa, bai beste elementu batzuetan txertatuta. Adibidez, hurrengo dokumentuak atal nagusi bat du, goiburu batekin eta atal gehigarri batekin. Bi elementuek <p> elementuak dituzte edukia irudikatzeko. Dokumentu honi 3-11 zerrendako araua aplikatzen badiogu, <p> elementu bakoitzaren barruko testua 20 pixeleko tamainarekin erakutsiko da, denak <main> elementuaren ondorengoak direlako.
‘Hautatzaileak konbinatzen’ izendatu dugun erregelaren bitartez <main> elementuaren barruan dauden <p> elementuei bakarrik eragiten diegu.
Dokumentauren barrenean ipini dugun <footer> elementuaren barruko <p> elementuak, ez dira aldatuko, ezta <header> elementu barruko <p> ere.
CSSk baditu barne sintaxi osagarri hainbat hautatzaileei aukeraketa zehatzagoa egiten laguntzeko. Adibidez, > karakterea erabil dezakegu beste elementu baten seme zuzena den elementu bat aipatzeko.
> karakterea hautagailu
section > p { font-size: 20px; }
> aplikatu da hautatzailea osatzeko.
> karaktereak adierazten du eskuinekoa dela eragina jasoko duen elementua aita ezkerreko elementua duenean. Goiko dokumentuko erregelak <section> elementuaren <p> elementu diren seme-alabak aldatzen ditu. Erregela hori dokumentuari aplikatzen diogunean, <header> elementukoak diren <p> elementuei ez die eragingo.
>Seme-alaben hautatzailea
+ karakterea hautagailu
+ karakterearekin, erreferentzia egiteko beste hautagailu bat sortzen da. Hautatzaile horrek aurretik beste elementu bat duen elementu bat aipatzen du. Biek elementu aita bera partekatu behar dute.
h1 + p { font-size: 20px; } Â +Â hautatzailea aplikatuz
Goiko erregelak elementu bat <h1> egin eta berehala kokatzen diren <p> elementu guztiei eragiten die. Erregela hori gure dokumentuari aplikatzen badiogu, <p> elementua bakarrik aldatuko da goiburuaren barruan, aurretik <h1> elementu bat duen bakarra delako.
Alboko elementuaren hautatzailea
Aurreko hautatzaileak <p> elementuari bakarrik eragiten dio, zeina <h1> elementu baten ondoren kokatzen baita. Bi elementuen artean beste elementu bat jarriz gero, <p> elementua ez da aldatuko. CSSk beste elementu baten jarraian dauden elementu guztiei eragiten dien hautatzaile bat sortzeko ~ izaera barne hartzen du. Hautagailu hau aurrekoaren antzekoa da, baina eragindako elementua ez da lehenengo elementua izan eta berehala aurkitu behar.
~ karakterea hautagilu
Arau horrek aurkitutako elementu guztiei eragiten die, ez bakarrik lehenengoari.
p ~ p { font-size: 20px; } ~ hautatzailea aplikatuz
Goiko erregelak beste elementu baten aurreko <p> elementu guztiei eragiten die.
Gure adibidean, <p> elementu guztiak aldatuko dira < section> elementuaren barruan, lehenengoa izan ezik, ez baitago <p> elementurik lehen elementuaren aurretik.
Anaiei eragiteko hautatzaile orokorra
Egin ezazu zuk zeuk: Sortu HTML fitxategi berri bat goiko kodearekin. Sortu nirEstiloak.css izeneko CSS fitxategi bat eta idatzi bertan probatu nahi duzun erregela. Txertatu beste elementu batzuk <p> elementuen artean, ikusteko zer lan egiten duten arau horiek.
Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.