CSS/Valikuline selekteerimine
Tihtipeale jääb väheseks üksnes võimalusest omistada stiile HTML-i elemendi nime järgi, näiteks muuta mõni konkreetne pealkiri allajoonituks või teha ühe lõigu piires kõik rõhutatud sõnad punaseks. Selleks ja veel palju enamaks on CSS-is mitmesugused selektorid.
Kõigi elementide selekteerimine
muudaSümbol * (tärn) selekteerib kõik elemendid. Esmapilgul võib tunduda, et selle effekt on täpselt sama, mis kasutades body elementi, kuid neil kahel on siiski selgelt tuntav vahe.
Mille poolest erinevad üksteisest näiteks järgnevad deklaratsioonid:
* { color: green }
body { color: green }
Mõlemad muudavad kogu teksti roheliseks, aga erinevus seisneb selles, et määrates värvi elemendile body, kandub see edasi kõigile temas sisalduvatele elementidele, välja arvatud nendele, millele on atribuut color juba eelnevalt määratud. Seega muutub roheliseks kõik ülejäänud tekst peale linkide, sest neile on juba antud sinine värv. Kasutades tärni (*) muutub aga roheliseks kogu tekst, sealhulgas ka lingid. Põhimõtteliselt on tärn samaväärne sellega, kui me kirjutaksime kõik html-i elemendid ja eraldaksime nad komadega:
a, abbr, acronym, ... , var { ... }
Alamelementide selekteerimine
muudaSelguse huvides kasutame järgmist HTML-i koodinäidet:
<body> <h1>Lorem ipsum <em>dolor</em></h1> <p>Lorem ipsum dolor <strong>sit amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut <em>enim</em> ad minim veniam, quis nostrud <a href="#">exercitation <em>ullamco</em> laboris</a> nisi ut aliquip ex ea <a href="#">commodo</a> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui <em>officia</em> deserunt mollit anim id est laborum</p> </body>
Sooviksime, et kõik em elemendid, mis on pealkirjades oleksid hariliku kaldkirja asemel hoopis allajoonitud, aga linkide (a) sees olevad em id oleksid nii üla- kui alajoonitud, kõik ülejäänud oleksid kaldkirjas nagu ikka.
Sellisel puhul aitab meid võimalus selekteerida alamelemente ehk siis elemente, mis asuvad teise elemendi sees. Süntaks on järgmine:
E F { ... }
Taoline selektor valib kõik elemendid F, mis asuvad elemendi E sees või viimases sisalduva elemendi sees jne jne. Seega võime koostada järgmise stiililehe:
h1 em {
text-decoration: underline;
font-variant: normal;
}
a em {
text-decoration: underline overline;
font-variant: normal;
}
Selle sama võib kirjutada ka järgmiselt:
h1 em, a em { font-variant: normal }
h1 em { text-decoration: underline }
a em { text-decoration: underline overline }
Pange tähele, et korraga on eraldatud h1 em ja a em, kuna koma on väga madala prioriteediga selektor ning võetakse arvesse kõige viimasena (samamoodi nagu matemaatikas liitmistehe tehekse alles peale korrutamisi, jagamisi ja astendamisi). Järgnev näide ei tee seda, mida ta näib tegevat:
h1 em,strong { color: blue }
Selle asemel et muuta siniseks pealkirjas resideeruvad em ja strong elemendid, muudetakse siniseks vaid pealkirjades asuvad em-id ning strong-id tehakse kõik siniseks.
Järglaste selektorit võib kasutada ka mitu korda järjest. Näiteks, et selekteerida em elemendid, mis asuvad lõikude sees:
p a em { ... }
võib pikendada seda seda selektorit veelgi:
html body p a em { ... }
Selektoris võib elemendi asemel kasutada ka tärni (*), mille koha peale sobib suvaline element. Näiteks, et selekteerida kõik rõhutused, mis asuvad lõigu piires mõne teise elemendi sees:
p * em { ... }
Või selekteerida kõik elemendid, mis asuvad lõigus mõne teise elemendi sees:
p * * { ... }
Klassid ja ID-d
muudaHTML lubab määrata igale elemendile klassi (parameeter class) ja / või identifikaatori (parameeter id). Klassi ja identifikaatori peamine erinevus seisneb selles, et ID peab olema lehekülje piires unikaalne, ehk siis id väärtust, mis määratud ühele elemendile, ei saa enam anda teisele. Ühte klassi võib samas aga kuuluda piiramatu arv elemente. Lisaks võib üks element kuuluda korraga mitmesse klassi.
Klassid ja ID-d annavad võimaluse lisada HTML-ile semantilist (tähenduslikku) infot. Päris kindlasti vajavad aga klassi ja / või ID määramist elemendid div ja span, millel muidu puudub igasugune semantiline tähendus.
Olgu meil näiteks selline HTML-i lõik:
<div id="peatykk-1" class="peatykk"> <h1>Lorem ipsum <em>dolor</em></h1> <p>Lorem ipsum dolor <strong>sit amet</strong>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut <em>enim</em> ad minim veniam, quis nostrud <a href="#peatykk_2" class="siselink">exercitation</a> ullamco laboris nisi ut aliquip ex ea <a href="#">commodo</a> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla <em>pariatur</em>.</p> <p>Excepteur sint <span class="laul">juhheirassa, huhhei</span> qui <em>officia</em> deserunt mollit anim id est laborum</p> </div> <div id="peatykk-2" class="peatykk"> <h1>At vero eos et accusamus</h1> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis <a href="peatykk_1" class="siselink">praesentium</a> voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi <em>sint occaecati cupiditate</em> non provident, similique sunt in culpa qui. <strong class="hoiatus">Officia deserunt mollitia attencione!</strong> Id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p> <p class="laul">Kes hommikuti külas käib,<br /> see asjatult ei longi,<br /> sest teavad kõik - param-paraa -<br /> et selleks hommik ongi.</p> </div>
Klassid
muudaKlasside selekteerimiseks kirjutatakse elemendi nime järele punkt ., peale mida kirjutatakse klassi nimi. Süntaks järgmine:
element.klassinimi { ... }
Seda teades võime kirjutada stiilid eelmises HTML-i näites toodud klasside jaoks:
div.peatykk { border-bottom: double thin gray }
a.siselink { text-decoration: underline overline }
span.laul, p.laul { font-style: italic }
strong.hoiatus {
background-color: red;
text-transform: uppercase;
}
Kuna tegelikult sooviksime kõigi klassi laul kuuluvate elemntide teksti kirjutada kursiivis, siis võime kasutada kõikide elementide selektorit *:
*.laul { font-style: italic }
Selles konstruktsioonis võime ka tärni ära jätta ning kirjutada lihtsalt:
.laul { font-style: italic }
See on täiesti samaväärne koos-tärniga variandiga.
Identifikaatorid
muudaIdentifikaatorite selekteerimiseks kirjutatakse elemendi nime järele sümbol # (trellid), mille järel omakorda identifikaatori nimi.
element#identifikaator { ... }
Seega võime kirjutada stiilid meie HTML-i näites olevatele ID-dele:
div#peatykk-1 { background-color: #ccd }
div#peatykk-2 { background-color: #dcc }
Analoogselt klassidega võime kasutades tärni (*) valida suvalise elemendi, millele vastav ID on seatud:
*#peatykk-1 { background-color: #ccd }
Või kirjutada sama ilma tärnita:
#peatykk-1 { background-color: #ccd }
Tihtipeale ongi mugav kasutada just viimati toodud süntaksi, sest nagunii omab seda ID-d vaid üks element, mille tüüp on üldjuhul teada ega muutu.
!important
muudaTeinekord on tarvis, et mõni stiil oleks kõrgema prioriteediga kui teised.
Olgu meil üks suur pikk dokument, mis on jaotatud div elemente kasutades alamosadeks: sissejuhatus, sisuosa, kokkuvõte ja lisad. Me soovime värvida igas dokumendi osas olevad pealkirjad erineva värviga ning kirjutame seega nõnda:
#sisu h2, #sisu h3 { color: green }
#sissejuhatus h2, #sissejuhatus h3 { color: blue }
#kokkuvote h2, #sissejuhatus h3 { color: brown }
#lisad h2, #lisad h3 { color: black }
Kuid mõningad osad meie dokumendist on alles kirjutamisel ning seetõttu me lisame igale pooleliolevale sektsioonile klassi pooleli. Kuna me soovime lugejaid selgelt informeerida, millised osad tekstist on alles toimetamisel, muudame nende sektsioonide teksti punaseks:
.pooleli { color: red }
Kuid oh häda - sedasi tehes muutub punaseks vaid tekst ning pealkirjad jäävad endiselt seda värvi, mis nad olid ülalpool määratud. Isegi kui me kirjutame nõnda:
.pooleli, .pooleli h2, .pooleli h3 { color: red }
Või, kui me oleme nõus, et ka lingid, mis on poolelioleva teksti sees, samuti punaseks muutuvad, siis saame kirjutada veelgi lühemalt:
.pooleli * { color: red }
Tuleb tunnistada, et reaalses elus on situatsioonid, kus meil on tarvis veebilehe kujundamisel !important käsku kasutada, niisama harvad kui Eesti maavärinad. Märksa olulisemat rolli mängib !important aga kasutajapoolsetes stiililehtedes, kus see on praktiliselt ainus võimalus määramaks stiile, mida veebilehe autorid üle kirjutade ei saa.
Selektorite kombineerimine
muudaKlasse ja ID-sid saab kenasti kasutada koos ning kombineerida neid teiste selektoritega. Näiteks võime täpsustada, et ID peatykk-1 peab kuuluma klassi peatykk:
div.peatykk#peatykk-1 { ... }
Võib määrata, et kõigi esimeses peatükis olevate linkide taustavärv oleks roheline:
div#peatykk-1 a { background-color: green }
ning siselinkide oma kollane:
div#peatykk-1 a.siselink { background-color: yellow }
Lõpetuseks võib kõik need näited kokku klapitada, lisada väikseid täiendusi ning saada sellise stiilile:
body {
font-family: sans-serif;
padding: 0em;
}
div.peatykk {
padding: 1em;
margin: 0em;
}
div.peatykk h1 { border-bottom: double thick gray }
div#peatykk-1 { background-color: #ccd }
div#peatykk-2 { background-color: #dcc }
a.siselink { text-decoration: underline overline }
div.peatykk a { background-color: yellow }
.laul { font-style: italic }
strong.hoiatus {
background-color: red;
text-transform: uppercase;
}
mis annab meie lehele umbes sellise välimuse:
