I denne sidste selector-tutorial præsenterer jeg en helt speciel form for selektorer. Disse er såkaldte pseudoklasser og pseudo-elementer. Disse er selektorer, der ikke refererer til specifikke HTML-elementer, men genereres af outputenheden.
Med pseudoklasser og pseudo-elementer kan deklarationer defineres for HTML-komponenter, der ikke klart kan beskrives af et HTML-element. Typiske eksempler inkluderer et hyperlink, der lige er blevet klikket på, eller et hyperlink, der endnu ikke er blevet besøgt.
Design af hyperlinks
Meget ofte vil man designe hyperlinks på siden. Til dette tilbyder CSS mange muligheder, hvorved de forskellige tilstande af hyperlinks kan adresseres og til sidst også ændres visuelt.
Hvis du for eksempel vil tildele et hyperlink en rød farve, vil det se sådan ud:
a:link {
color: red;
}
Med a:visited markeres allerede besøgte hyperlinks. Ved hjælp af den følgende syntaks kan sådanne hyperlinks, der allerede er blevet klikket på, vises i blå farve.
a:visited {
color:blue;
text-decoration:none;
}I browseren ser det sådan ud:
Hvis du vil designe hyperlinks separat, der lige er blevet klikket på, er det også muligt.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Dertil bruges syntaksen a:active.
Syntaksen a:hover relaterer derimod til tilstanden, hvor musemarkøren bevæger sig over hyperlinket. Derudover er der en pseudo-element med a:focus. Dette beskriver øjeblikket, hvor hyperlinket får fokus.
Yderligere pseudo-elementer
Der er pseudo-elementer, som kan bruges til at targete dele af andre elementer. Et typisk eksempel er ::first-letter. Dette pseudo-element vælger det første tegn i det aktuelle element. Det kan bruges for alle elementer, der indeholder tekst. Men pas på: Pseudo-elementer skal kun skrives i slutningen af alle selektorer. De skal derfor stå før den åbnende krølleparentes.
h1::first-letter {
color: blue;
}
Med ::first-line kan den første linje af et element adresseres. Dette pseudo-element kan kun anvendes på blok-niveau-elementer. Et eksempel:
p::first-line {
background-blue;
}
Og her er resultatet i browseren:
en
Ved hjælp af de to pseudo-elementer :after og :before kan der indsættes ekstra indhold før og efter et element. Med content bestemmes, hvad der skal udskrives.
• normal – det pseudo-element, der normalt defineres, genereres ikke.
• none – pseudo-elementet genereres ikke.
• <string> – den opgivne streng vil blive udskrevet. Strengene skal anbringes i enkle eller dobbelte anførselstegn.
• <uri> – ressourcen specificeret under URI'en indsættes.
• <counter> – definerer en tæller eller refererer til en specifik teller.
• attr(<identifier>) – værdien af attributten angivet i parentes vil blive indsat.
• close-quote – indsætter et lukket anførselstegn.
• no-close-quote – det lukkede anførselstegn indsættes ikke, men indlejringstiefen øges med én.
• no-open-quote – det åbne anførselstegn indsættes ikke, men indlejringstiefen øges med én.
• open-quote – et åbent anførselstegn indsættes.
Et eksempel:
ul li:before {
content: uri("bullet.gif");
}
Også med CSS3 blev pseudo-selector :not introduceret. Dette gør det meget nemt at vælge specifikke indhold. Et første eksempel viser, hvor kraftig denne pseudo-selector faktisk er. Forestil dig, at du vil vælge alle hyperlinks, der ikke har et href-attribut. Den tilsvarende syntaks ville se sådan ud:
a:not([href])
"Normale" hyperlinks forbliver upåvirket af denne syntaks. Adgangen til anker-definitioner ville imidlertid være mulig.
<a name="top">Siden top</a>
Et lidt mere omfattende eksempel skal illustrere styrken ved :not. Inden i et dokument er der defineret forskellige tekstafsnit.
<body> <h1>PSD-Tutorials.de</h1> <p>Dette er et afsnit.</p> <p>Dette er endnu et afsnit.</p> <div>Dette er et tekstområde.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Ud over tekstafsnit markeret med p er der også et div-område og et hyperlink. Nu skal følgende ske:
• Alle afsnit markeret med p får en sort skriftfarve.
• Overalt hvor der ikke er p-afsnit, bruges derimod rød som skriftfarve.
Den tilhørende CSS-syntaks ser således ud:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Princippet om arv
En af de vigtigste ting, når det kommer til forståelse af CSS-definitioner, er arv. Faktisk nedarves stilstilene fra et element til et andet i CSS.
Et eksempel:
html {
color: red
}Ved denne definition tildeles html-elementet den røde forgrundsfarve.
På grund af arveprincippet gælder denne farvedefinition kun for indholdet af div. P-afsnittet vises derimod i sort skrift.
I CSS er der forskellige måder at definere stil på. Dette er også årsagen til, at der kan være modstridende instruktioner for et element. Til sådanne tilfælde angiver CSS en vægtning. På baggrund af dette princip er det klart reguleret, hvilke af instruktionerne der har forrang for et element. Jeg vil ikke gå i detaljer om dette princip på dette tidspunkt. Du kan dog finde udførlige oplysninger om det f.eks. på siden http://wiki.selfhtml.org/wiki/CSS/Kaskade eller også under http://www.thestyleworks.de/basics/cascade.shtml.
Mit formål her er at vise, hvad du skal være opmærksom på, når du definerer CSS-egenskaber. Dertil tjener følgende eksempel:
<! DOCTYPE html>
<html lang = "de">
<head>
<titel>PSD-Tutorials.de</titel>
<meta charset = "UTF-8" />
<style>
krop {
skrifttype: Arial, Helvetica, sans-serif;
skriftstørrelse: 90%;
}
p {
farve: # 000;
}
h1 {
skriftstørrelse: 120%;
skriftvægt: normal;
}
stærk {
farve:#CCCCCC;
}
h2 stærk {
farve: rød;
}
</stil>
</head>
<krop>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Dette er et afsnit med et <stærkt>fedt ord</stærkt>.</p>
<h2>Dette er en overskrift med et <stærkt>fedt ord</stærkt>.</h2>
</div>
</krop>
</html>I browseren ser det sådan ud:
Som du kan se, formateres ord markeret med strong forskelligt. Hvilken formatering der anvendes, afhænger endeligt af rækkefølgen af definitionerne.
Alternativt er der derudover nøgleordet !vigtigt, som du kan bruge til at markere en CSS-instruktion som særligt vigtig.
<style>
krop {
skrifttype: Arial, Helvetica, sans-serif;
skriftstørrelse: 90%;
}
p {
farve: # 000;
}
h1 {
skriftstørrelse: 120%;
skriftvægt: normal;
}
stærk {
farve:#CCCCCC !vigtigt;
}
h2 stærk {
farve: rød;
}
</stil>Her er endnu et kig på resultatet:
Læs absolut de kilder, der er nævnt i denne vejledning. (Selvom du i starten sikkert ikke behøver dykke alt for dybt ned i dette emne).
