I denna sista selektorguide presenterar jag en mycket speciell typ av selektorer för er. Dessa är s.k. pseudo-klasser och pseudo-element. Det är selektorer som inte hänvisar till specifika HTML-element utan genereras av utgångsenheten.
Med pseudo-klasser och pseudo-element kan deklarationer definieras för HTML-komponenter som inte tydligt kan beskrivas med ett HTML-element. Typiska exempel är en just klickad länk eller en ännu ej besökt hyperlänk.
Designa hyperlänkar
Väldigt ofta vill man designa sidans hyperlänkar. För detta erbjuder CSS ett antal olika möjligheter för att anpassa de olika tillstånden för hyperlänkar på ett visuellt sätt.
Vill du till exempel ge en hyperlänk en röd färg, skulle det se ut så här:
a:link {
color: röd;
}
Med a:visited markeras redan besökta hyperlänkar. Genom följande syntax kan man visa sådana hyperlänkar som redan har klickats på i blå färg.
a:visited {
color: blå;
text-decoration: ingen;
}I webbläsaren ser det ut så här:
Om du vill designa hyperlänkar som precis har klickats på är det också möjligt.
a:active {
font-weight: bold;
color: blå;
text-decoration: ingen;
}
För detta används syntaxen a:active.
Syntaxen a:hover hänvisar istället till tillståndet när muspekaren förs över hyperlänken. Dessutom finns det med a:focus ett annat pseudo-element. Det beskriver ögonblicket då hyperlänken får fokus.
Andra pseudo-element
Det finns pseudo-element som kan användas för att hantera delar av andra element. Ett typiskt exempel är ::first-letter. Detta pseudo-element väljer det första tecknet i det aktuella elementet. Det kan användas för alla element som innehåller text. Men observera: pseudo-element måste skrivas ut i slutet av alla selektorer. De måste alltså placeras före den öppna klammerparentesen.
h1::first-letter {
color: blå;
}
Med ::first-line kan den första raden av ett element anges. Detta pseudo-element kan endast användas på blocknivåelement. Ett exempel:
p::first-line {
bakgrund-blå;
}
Och här är resultatet i webbläsaren:
en
Med hjälp av pseudo-elementen :after och :before kan ytterligare innehåll visas före och efter ett element. Med innehåller bestäms vad som ska visas.
• normal – det vanligtvis definierade pseudo-elementet genereras inte.
• none – pseudo-elementet genereras inte.
• <string> – den här angivna textsträngen visas. Textsträngar ska anges i enkla eller dubbla citationstecken.
• <uri> – resursen som anges i URI infogas.
• <räknare> – definierar en räknare eller hänvisar till en specifik räknare.
• attr(<identifier>) – värdet för attributet som anges inom parentes infogas.
• close-quote – infogar ett avslutande citattecken.
• no-close-quote – inget avslutande citattecken infogas, men inbäddningsnivån ökar med ett.
• no-open-quote – inget inledande citattecken infogas, men inbäddningsnivån ökar med ett.
• open-quote – ett inledande citattecken infogas.
Ett exempel:
ul li:before {
content: uri("punktbild.gif");
}
Med CSS3 introducerades även pseudo-selektorn :not. Med denna kan innehåll enkelt väljas selektivt. Ett första exempel visar hur kraftfull denna pseudo-selektor verkligen är. Föreställ er att ni vill välja alla hyperlänkar som inte har ett href-attribut. Den motsvarande syntaxen skulle se ut såhär:
a:not([href])
"Vanliga" hyperlänkar påverkas inte av denna syntax. Åtkomst till ankaranvändningar skulle dock vara möjlig.
<a name="top">Toppen av sidan</a>
Ett lite mer utförligt exempel ska belysa kraften i :not. Inom ett dokument har olika textavsnitt definierats.
<body> <h1>PSD-Tutorials.de</h1> <p>Detta är ett stycke.</p> <p>Detta är ett annat stycke.</p> <div>Detta är en textområde.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Förutom textavsnitt markerade med p, finns det också en div-område och en hyperlänk. Nu ska följande hända:
• Alla avsnitt markerade med p får en svart textfärg.
• Överallt där det inte finns några p-avsnitt, används däremot rött som textfärg.
Den motsvarande CSS-syntaxen ser ut som följande:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Arvsprincipen
En av de viktigaste sakerna när det gäller förståelse av CSS-definitioner är arvet. Faktum är att i CSS ärvs stilstilarna från ett till ett annat element.
Ett exempel:
html {
color: red
}Genom denna definition tilldelas html-elementet den röda textfärgen.
Med tanke på arvsprincipen gäller denna färgdefinition först och främst alla element som är underordnade html. Så nu visas automatiskt först och främst alla element i rött som ligger under html. Fördelen med detta alternativ: För dessa element behöver ni inte explicit ange rött som färg. Men om innehållet i p-avsnitt inte ska visas i rött? Då måste man skriva över den överordnade färgdefinitionen från html.
html {
color: red;
}
p {
color: #000;
}
Vad händer om det finns två element p och div nu?
<body> <p>PSD-Tutorials.de</p> <div>Värld</div> </body>
Resultatet ser ut så här:
Html-färgdefinitionen påverkar endast innehållet i div. P-avsnittet visas däremot i svart text.
I CSS finns olika sätt att definiera stilar. Det är därför som det för ett element kan finnas motstridiga anvisningar. För sådana fall har CSS ett viktprincip. Enligt denna princip är det tydligt reglerat vilka av anvisningarna som har företräde för ett element. Jag vill inte gå in på detaljer angående denna princip här. Ni kan dock hitta utförlig information om detta exempelvis på sidan http://wiki.selfhtml.org/wiki/CSS/Kaskade eller också på http://www.thestyleworks.de/basics/cascade.shtml.
Det jag vill visa är vad ni bör vara uppmärksamma på när ni definierar CSS-egenskaper. Därför finns följande exempel:
<!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>Detta är ett stycke med ett <strong>fetstil ord</strong>.</p>
<h2>Detta är en rubrik med ett <strong>fetstil ord</strong>.</h2>
</div>
</body>
</html>I webbläsaren ser det ut så här:
Som ni kan se, formateras orden som är markerade med strong på olika sätt. Vilken typ av formatering som används beror slutligen på ordningen av definitionerna.
Alternativt finns det också nyckelordet !important, genom vilket ni kan markera en CSS-anvisning som särskilt 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>Här är resultatet igen:
Läs definitivt igenom de källor som nämns i denna handledning. (Även om man för början säkert inte behöver gå för djupt in i detta ämne).
