Selles viimases selektorite õpetuses tutvustan teile ühte väga erilist selektorite vormi. Need on nn pseudoklassid ja pseudoelemendid. Need on selektorid, mis ei viita konkreetsetele HTML-elementidele, vaid genereeritakse väljundseadmesse.
Koos pseudoklasside ja pseudoelementidega saab määrata deklaratsioone HTML-osaliste jaoks, mida ei saa selgelt kirjeldada HTML-elementidega. Tüüpilised näited on just klikitud või veel külastamata hüperlink.
Hüperlingid kujundada
Väga sageli soovitakse kujundada lehe hüperlinke. Selleks pakub CSS mitmeid võimalusi, mille abil saab adresseerida erinevaid hüperlinkide olekuid ja lõpuks ka neid visuaalselt kohandada.
Kui soovite näiteks määrata hüperlingile punase värvi, näeks see välja järgmiselt:
a:link {
color: red;
}
Koos a:visited määratletakse juba külastatud hüperlingid. Järgmise süntaksiga saab kuvada sellised hüperlingid, mis on varem klõpsatud, sinise värvina.
a:visited {
color:blue;
text-decoration:none;
}Veebilehitsejas näeb see välja järgmine:
Kui soovite eraldi kujundada hüperlinke, mis on praegu klõpsatud, siis see on samuti võimalik.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Selleks kasutatakse süntaksit a:active.
Vastupidi viitab süntaks a:hover seisundile, kui kursor liigub hüperlingi kohale. Lisaks on olemas a:focus pseudoelement. See kirjeldab hetke, mil hüperlink saab fookuse.
Muud pseudoelemendid
On olemas pseudoelemendid, mille abil saab adresseerida teiste elementide osi. Tüüpiline näide sellest on ::first-letter. See pseudoelement valib välja hetke elemendi esimese tähemärgi. Seda saab kasutada kõikide elementide puhul, mis sisaldavad teksti. Kuid olge ettevaatlik: pseudoelemendid peavad olema kõikide selektorite lõpus. Seega tuleb need märkida enne avatud koolonit.
h1::first-letter {
color: blue;
}
Üle ::first-line saab käsitleda elemendi esimest rida. See pseudoelement on rakendatav ainult plokk-tasemele elementidele. Näide:
p::first-line {
background-blue;
}
Ja siin on tulemus veebilehitsejas:
üks
Üle pseudoelementide :after ja :before saab enne ja pärast elemendi kuvada lisasisu. "Content" määrab, mida tuleks väljastada.
• tavaline – tavalist pseudoelementi ei genereerita tavaliselt.
• pole – pseudoelementi ei genereerita.
• <string> – määratud siin olev string väljastatakse. Stringid tuleb märkida üksik- või topeltkordsete jutumärkidena.
• <uri> – määratud URI allika ressurss sisestatakse.
• <counter> – defineerib loenduri või viitab konkreetsele loendurile.
• attr(<identifier>) – selleks sulgudes antud atribuudi väärtus sisestatakse.
• close-quote – lisab sulgeva jutumärgi.
• no-close-quote – seekord pole sulgevat jutumärki, kuid süvendamine suureneb ühe võrra.
• no-open-quote – seekord pole avavat jutumärki, kuid süvendamine suureneb ühe võrra.
• open-quote – lisab avava jutumärgi.
Näide:
ul li:before {
content: uri("bullet.gif");
}
Koos CSS3-s on kasutusele võetud pseudoselektor :not. Selle abil saab väga lihtsalt valida sihtmärgiga sisu. Esimene näide näitab, kui võimas see pseudoselektor tegelikult on. Oletame, et soovite valida kõik hüperlingid, mil pole href-atribuuti. Vastav süntaks oleks järgmine:
a:not([href])
"Tavalised" hüperlingid ei mõjuta seda süntaksit. Kuid ankorite määratlustele pääseks ikkagi juurde.
<a name="top">Lehe algus</a>
Veidi põhjalikum näide peaks selgitama :not jõudlust. Dokumendis on määratletud erinevad tekstilõigud.
<body> <h1>PSD-Tutorials.de</h1> <p>See on lõik.</p> <p>See on veel üks lõik.</p> <div>See on tekstiala.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Lisaks p-ga märgitud tekstilõikudele on olemas ka div-ala ja hüperlink. Nüüd peaks järgmist juhtuma:
• Kõik p-ga märgistatud lõigud saavad musta tekstivärvi.
• Kõikjal, kus pole p-lõike, kasutatakse tekstivärvina aga hoopis punast värvi.
Vastav CSS-süntaks näeb välja järgmine:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Pärandiprintsiip
Üks olulisemaid asju CSS-määratluste mõistmiseks on pärandiprintsiip. Tegelikult päritakse CSS-is stiiliatribuudid ühelt teisele elemendilt edasi.
Näide:
html {
color: red
}Selle määratluse abil antakse html-elemendile punane esiplaanivärv.
Seetõttu kehtib see värvimääratlus esialgu kõikidele html-alamüksustele. Seega kuvatakse vaikimisi kõik html allalangemas olevad elemendid punaseks. Selle variandi eelis on, et nende elementide puhul ei pea te punase värvina konkreetset värvi määrama. Kuid mis juhtub, kui p-lõikude sisu ei tohiks punasena kuvada? Siis tuleb üle kirjutada html-i ülemine värvimääratlus.
html {
color: red;
}
p {
color: #000;
}
Mis juhtub, kui on olemas kaks elemendit p ja div?
<body> <p>PSD-Tutorials.de</p> <div>Maailm</div> </body>
Tulemus näeb välja selline:
html-i värvimääratlus mõjutab ainult div-i sisu. P-lõik aga kuvatakse mustas kirjas.
CSS-is on erinevaid võimalusi stiilimääratluste kindlaksmääramiseks. Sellepärast võib ühe elemendi kohta olla vastuolulisi juhiseid. Sellisteks juhtudeks on CSS-is kaalumispõhimõte. Selle printsiibi alusel on selgelt reguleeritud, millised juhised on mingi elemendi puhul prioriteetsed. Ma ei hakka siinkohal nii väga sügavuti minema sellesse teemasse, mis puutub sellesse printsiipi. Kuid täielikku teavet selle kohta leiate näiteks lehelt http://wiki.selfhtml.org/wiki/CSS/Kaskade või ka aadressilt http://www.thestyleworks.de/basics/cascade.shtml.
Mis mulle siiski oluline on, on näidata, mida tuleb silmas pidada CSS-omaduste määratlemisel. Selleks on järgmine näide:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC;
}
h2 strong {
color: red;
}
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>See on lõik, milles on <strong>rasvane sõna</strong>.</p>
<h2>See on pealkiri, milles on <strong>rasvane sõna</strong>.</h2>
</div>
</body>
</html>Brauseris näeb see välja järgmiselt:
Nagu näete, on strong-märgistusega sõnad erinevalt vormindatud. Millist tüüpi vormingut kasutatakse, sõltub lõppkokkuvõttes määratluste järjestusest.
Alternatiivina on olemas ka märksõna !important, mis võimaldab määratlust eriti oluliseks muuta.
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 90%;
}
p {
color: #000;
}
h1 {
font-size: 120%;
font-weight: normal;
}
strong {
color:#CCCCCC !important;
}
h2 strong {
color: red;
}
</style>A siin on taas pilk tulemusele:
Kindlasti lugege selles kontekstis ka läbi selle õpetuse loetletud allikad. (Kuigi alguses ei pruugi see teema niivõrd sügavalt uurida).
