Šajā pēdējajā selektoru pamācībā es jums iepazīstināšu ar ļoti īpašu selektoru veidu. Tie ir tā sauktie pseudoklases un pseidoelementi. Tie ir tie selektori, kas nesakrīt ar konkrētu HTML elementu, bet tiek ģenerēti no izvades ierīces.
Ar pseudoklasēm un pseidoelementiem var definēt stilus HTML daļām, kuras nevar viennozīmīgi aprakstīt ar HTML elementu. Tipiski piemēri ir tieši noklikšķināta hipersaites vai vēl neapmeklēta hipersaites.
Izejmantojamo saīsinājumu izveidošana
Ļoti bieži ir nepieciešams pielāgot lapas hipersaites. Tam CSS nodrošina dažādas iespējas, ar kurām var adresēt un vizuāli pielāgot dažādas saites stāvokļus.
Ja jūs, piemēram, vēlaties piešķirt hipersaiti sarkanu krāsu, tas izskatītos šādi:
a:link {
color: red;
}
Ar a:visited tiks marķētas jau apmeklētas hipersaites. Ar nākamo sintaksi ir iespējams vizuāli parādīt šādas hipersaites, kas jau ir bijušas noklikšķinātas, zilā krāsā.
a:visited {
color:blue;
text-decoration:none;
}Pārlūkā tas izskatās šādi:
Ja jūs vēlaties vizuāli pielāgot saites, kas tiek tieši noklikšķinātas, tas arī ir iespējams.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Tiek izmantota a:active sintakse. 
Savukārt a:hover sintakse attiecas uz stāvokli, kad ar peles kursoru pārkāpj pār hipersaiti. Turklāt ir pieejams pseidoelements a:focus. Tas apraksta brīdi, kad hipersaite tiek efektīva.
Eksistē pseidoelementi, kas ļauj piekļūt citu elementu daļām. Tipisks piemērs ir ::first-letter. Šis pseidoelements izvēlas pašreizējā elementa pirmo burtu. To var izmantot visiem elementiem, kas satur tekstu. Bet uzmanību: pseidoelementi drīkst ierakstīt tikai pēc visiem selektoriem. Tie tādēļ jāatrodas pirms atvērtā figūriekavu.
h1::first-letter {
color: blue;
}
Ar ::first-line iespējams piekļūt elementa pirmajai rindai. Šis pseidoelements ir piemērojams tikai bloka līmeņa elementiem. Piemērs:
p::first-line {
background-blue;
}
Un te ir rezultāts pārlūkā:
viens
pirms li: pēc {
saturs: uri("bullet.gif");
}
Ar CSS3 tika ieviests arī pseidoselektors :not. Tas ļauj ļoti vienkārši atlases noteiktus saturus. Pirmajai piemērs parāda, cik spēcīgs ir šis pseidoselektors patiesībā. Pieņemsim, ka jūs vēlaties atlasīt visas tīmekļa saites, kuras nesatur href atribūtu. Attiecīgā sintakse izskatās šādi:
a:not([href])
"Parastās" hipersaites būs neskartas šīs sintakses dēļ. Tomēr tas ļautu piekļūt piesaistītajiem definīcijām.
<a name="top">Lapas augšdaļa</a>
Kaut nedaudz detalizētāks piemērs parāda :nalso spēju. Dokumentā ir definētas dažādas teksta rindas.
<body> <h1>PSD-Tutorials.de</h1> <p>Šis ir teksta rindkopa.</p> <p>Šis ir vēl viens teksta rindkopa.</p> <div>Tas ir teksta apgabals.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Papildus teksta rindām, kas ir apzīmētas ar p-īpašību, ir arī div apgabals un saites. Tagad ir jānotiek sekojošam:
• Visas ar p apzīmētās rindas saņem melnu krāsu tekstu.
• Visur, kur nav p rindu, tiks izmantota sarkanā teksta krāsa.
Atbilstošais CSS sintakse izskatās šādi:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}
Mantošanas princips
Viena no svarīgākajām lietām, kad runa ir par CSS definīcijām, ir mantošana. Patiesībā CSS stilu īpašības tiek pārmantotas no viena uz otru elementu.
Piemērs:
html {
color: red
}
Ar šo definīciju html elementam tiek piešķirta sarkanā krāsas priekšplāna krāsa.
Saskaņā ar mantošanas principu šī krāsu definīcija tagad galvenokārt attiecas uz visiem elementiem, kas atrodas zem html. Tāpēc tagad no sākuma visi elementi, kas atrodas zem html, tiks parādīti sarkanā krāsā. Šīs variantes priekšrocība: Šiem elementiem sarkanu krāsu nav nepieciešams noteikt izteikti. Bet kas notiek, ja, piemēram, p-rindas saturu nevēlaties redzēt sarkanā krāsā? Tad jāpārraksta html vecāku krāsu definīcija.
html {
color: red;
}
p {
color: #000;
}
Kas notiek, ja tagad ir divi elementi p un div?
<body> <p>PSD-Tutorials.de</p> <div>Pasaule</div> </body>
Rezultāts izskatās šādi:
Html krāsu definīcija ietekmē tikai div saturu. Savukārt p rinda tiek parādīta melnā krāsā.
CSS ļauj definēt stila definīcijas dažādos veidos. Tāpēc ir iespējamas pretrunīgas norādes vienam elementam. Šādos gadījumos CSS paredz svaru principu. Šā principa pamatā ir skaidrs, kuras no norādēm ir prioritāras vienai elementam. Šajā vietā es negribu iet dziļāk, kā šis princips darbojas. Detalizēta informācija par to atrodama, piemēram, lapā http://wiki.selfhtml.org/wiki/CSS/Kaskade vai arī vietnē http://www.thestyleworks.de/basics/cascade.shtml.
Mani interesē tas, lai jums būtu skaidrs, uz ko jāpievērš uzmanība, definējot CSS īpašības. To parāda šāds piemērs:
<!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>Šī ir rinda ar <strong>pastiprinātu vārdu</strong>.</p>
<h2>Šī ir virsraksta rinda ar <strong>pastiprinātu vārdu</strong>.</h2>
</div>
</body>
</html>
Kā redzat, piemēram, ar strong atzīmētie vārdi tiek formatēti atšķirīgi. Kura formatēšanas veida tiek izmantots, galu galā ir atkarīgs no definīciju secības.
Kā alternatīvu, šeit ir vēl viena iespēja - !important atslēgvārds, ar kuru varat norādīt CSS norādījumu kā īpaši svarīgu.
<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>
Arī šeit varam apskatīt rezultātu:
Šajā kontekstā noteikti izlasiet šajā pamācībā minētās avotus. (Lai gan sākumā nav nepieciešams tik dziļi ieiet šajā tēmā).
