I denne siste selektøren veiledningen presenterer jeg en veldig spesiell form for selektører. Disse er såkalte pseudoklasser og pseudo-elementer. Dette er selektører som ikke refererer til bestemte HTML-elementer, men som genereres av utstyret.
Med pseudoklasser og pseudo-elementer kan deklarasjoner for HTML-elementer defineres som ikke kan beskrives tydelig av et HTML-element. Typiske eksempler er en nylig klikket eller en ennå ikke besøkt hyperkobling.
Design av hyperkoblinger
Ofte vil du designe hyperkoblinger på siden. For dette tilbyr CSS mange muligheter som lar deg adressere de forskjellige tilstandene til hyperkoblinger og til slutt tilpasse dem visuelt.
Hvis du for eksempel vil tildele en rød farge til en hyperkobling, ville det se slik ut:
a:link {
color: red;
}
Med a:visited blir allerede besøkte hyperkoblinger markert. Ved hjelp av følgende syntaks kan slike hyperkoblinger som allerede har blitt klikket på, vises i blått.
a:visited {
color: blue;
text-decoration: none;
}I nettleseren ser det slik ut:
Hvis du vil designe hyperkoblinger som blir klikket på, er det også mulig.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Syntaksen a:active brukes for dette. 
Syntaksen a:hover derimot refererer til tilstanden der musemarkøren er over hyperkoblingen. I tillegg er det et annet pseudoelement med a:focus. Dette beskriver øyeblikket der hyperkoblingen får fokus.
Andre pseudoelementer
Det er pseudoelementer som lar deg adressere deler av andre elementer. Et typisk eksempel på dette er ::first-letter. Dette pseudoelementet velger det første tegnet i gjeldende element. Det kan brukes på alle elementer som inneholder tekst. Men vær oppmerksom: Pseudoelementer må bare noteres på slutten av alle selektører. Så de må stå før den åpne krøllparentesen.
h1::first-letter {
color: blue;
}
Med ::first-line kan den første linjen i et element adresseres. Dette pseudoelementet kan bare brukes på blokk-nivå-elementer. Et eksempel:
p::first-line {
background-blue;
}
Og her er resultatet i nettleseren:
en
Gjennom de to pseudoelementene :after og :before kan det vises ekstra innhold før og etter et element. Med content bestemmes hva som skal vises.
• normal – det vanligvis definerte pseudoelementet genereres ikke.
• none – pseudoelementet genereres ikke.
• <string> – den angitte strengen her blir vist. Strenger må settes i enkle eller doble anførselstegn.
• <uri> – ressursen spesifisert under URI-en settes inn.
• <counter> – definerer en teller eller adresserer en spesifikk teller.
• attr(<identifier>) – verdien av attributtet angitt i parentes settes inn.
• close-quote – setter inn et lukkende anførselstegn.
• no-close-quote – det settes ikke inn et lukkende anførselstegn, men innkapslingsdybden øker med en.
• no-open-quote – det settes ikke inn et åpnende anførselstegn, men innkapslingsdybden øker med en.
• open-quote – et åpnende anførselstegn settes inn.
Et eksempel:
ul li:before {
content: uri("bullet.gif");
}
Med CSS3 ble også pseudoselektoren :not introdusert. Dette gjør det veldig enkelt å velge spesifikke innhold. Et første eksempel viser hvor kraftig denne pseudoselektoren faktisk er. For eksempel, hvis du vil velge alle hyperkoblinger som ikke har et href-attributt. Den tilsvarende syntaksen ville være som følger:
a:not([href])
"Vanlige" hyperkoblinger ville ikke bli berørt av denne syntaksen. Tilgang til ankedefinisjoner vil imidlertid lykkes.
<a name="top">Til toppen av siden</a>
Et litt mer utfyllende eksempel vil vise kraften til :not. Innenfor et dokument var det definert forskjellige tekstavsnitt.
<body> <h1>PSD-Tutorials.de</h1> <p>Dette er et avsnitt.</p> <p>Dette er et annet avsnitt.</p> <div>Dette er et tekstområde.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Foruten tekstavsnitt markert med p, finnes det også et div-område og en hyperlenke. Nå skal følgende skje:
• Alle tekstavsnitt merket med p får svart tekstfarge.
• Overalt hvor det ikke står p-avsnitt, skal det derimot brukes rødt som tekstfarge.
Den tilsvarende CSS-syntaksen ser slik ut:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Arvesprinsippet
En av de viktigste tingene når det gjelder forståelse av CSS-definisjoner, er arv. Faktisk arves stilegenskapene i CSS fra et element til et annet.
Et eksempel:
html {
color: red
}Gjennom denne definisjonen blir forgrunnsfargen rød tilordnet html-elementet.
På grunn av arvprinsippet gjelder denne fargedefinisjonen først og fremst kun for innholdet av div. P-avsnittet derimot vises i svart skrift.
I CSS er det forskjellige måter å angi stildefinisjoner på. Dette er også grunnen til at det kan være motstridende instruksjoner for et element. CSS har et prioriteringsprinsipp for slike tilfeller. Ved hjelp av dette prinsippet er det tydelig regulert hvilke av instruksjonene som har forrang for et element. Jeg vil ikke gå inn på alle detaljer om dette prinsippet akkurat nå. Men dere finner detaljert informasjon om dette for eksempel på siden http://wiki.selfhtml.org/wiki/CSS/Kaskade eller også under http://www.thestyleworks.de/basics/cascade.shtml.
Mitt poeng er å vise hva dere bør være oppmerksom på når dere definerer CSS-egenskaper. Til dette formål tjener følgende eksempel:
<!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>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>I nettleseren ser det slik ut:
Som dere ser, formaters for eksempel de merkede ordene med strong ulikt. Hvilken formatering som brukes, avhenger til slutt av rekkefølgen på definisjonene.
Alternativt finnes det også nøkkelordet !important, som gjør det mulig å merke en CSS-instruksjon som spesielt viktig.
<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>Igjen kan dere se resultatet:
Les også definitivt gjennom kildene nevnt i denne opplæringen. (Selv om man sikkert ikke trenger å dykke så dypt inn i dette emnet med en gang).
