In diesem letzten Selektoren-Tutorial stelle ich euch eine ganz spezielle Form der Selektoren vor. Bei denen handelt es sich um sogenannte Pseudoklassen und Pseudoelemente. Das sind solche Selektoren, die sich nicht auf bestimmte HTML-Elemente beziehen, sondern vom Ausgabegerät generiert werden.
Mit Pseudoklassen und Pseudoelementen können Deklarationen für HTML-Bestandteile definiert werden, die sich nicht eindeutig durch ein HTML-Element beschreiben lassen. Typische Beispiele sind ein gerade angeklickter oder ein noch nicht besuchter Hyperlink.
Hyperlinks gestalten
Sehr oft möchte man die Hyperlinks der Seite gestalten. Dafür hält CSS zahlreiche Möglichkeiten bereit, über die sich die unterschiedlichen Zustände von Hyperlinks ansprechen und letztendlich auch optisch anpassen lassen.
Wollt ihr einem Hyperlink beispielsweis eine rote Farbe zuweisen, sähe das folgendermaßen aus:
a:link {
color: red;
}
Mit a:visited werden hingegen bereits besuchte Hyperlinks markiert. Durch die folgende Syntax kann man solche Hyperlinks, die schon einmal angeklickt wurden, in blauer Farbe darstellen.
a:visited {
color:blue;
text-decoration:none;
}Im Browser sieht das so aus:
Wollt ihr Hyperlinks gesondert gestalten, die gerade angeklickt werden, ist das ebenfalls möglich.
a:active {
font-weight: bold;
color: blue;
text-decoration: none;
}
Verwendet wird dafür die Syntax a:active.
Die Syntax a:hover bezieht sich hingegen auf den Zustand, bei dem mit dem Mauszeiger über den Hyperlink gefahren wird. Darüber hinaus gibt es mit a:focus ein weiteres Pseudoelement. Dieses beschreibt den Moment, an dem der Hyperlink den Fokus bekommt.
Weitere Pseudoelemente
Es gibt Pseudoelemente, mit denen sich Teile anderer Elemente ansprechen lassen. Ein typisches Beispiel dafür ist ::first-letter. Dieses Pseudoelement wählt das erste Zeichen des aktuellen Elements aus. Es kann für alle Elemente eingesetzt werden, die Text enthalten. Aber Achtung: Pseudoelemente dürfen nur am Ende aller Selektoren notiert werden. Sie müssen also vor der öffnenden geschweiften Klammer stehen.
h1::first-letter {
color: blue;
}
Über ::first-line kann die erste Zeile eines Elements angesprochen werden. Dieses Pseudoelement ist ausschließlich auf Block-Level-Elemente anwendbar. Ein Beispiel:
p::first-line {
background-blue;
}
Und hier das Ergebnis im Browser:
ein
Über die beiden Pseudoelemente :after und :before lassen sich vor und nach einem Element zusätzliche Inhalte einblenden. Mit content wird bestimmt, was ausgegeben werden soll.
• normal – das in der Regel definierte Pseudoelement wird nicht generiert.
• none – das Pseudoelement wird nicht generiert.
• <string> – es wird die hier angegebene Zeichenkette ausgegeben. Zeichenketten sind in einfache oder doppelte Anführungszeichen zu setzen.
• <uri> – die unter dem URI angegebene Ressource wird eingefügt.
• <counter> – definiert einen Zähler oder spricht einen bestimmten Zähler an.
• attr(<identifier>) – der Wert des in Klammern angegebenen Attributs wird eingefügt.
• close-quote – fügt ein schließendes Anführungszeichen ein.
• no-close-quote – es wird zwar kein schließendes Anführungszeichen eingefügt, dafür erhöht sich aber die Verschachtelungstiefe um eins.
• no-open-quote – es wird zwar kein öffnendes Anführungszeichen eingefügt, dafür erhöht sich aber die Verschachtelungstiefe um eins.
• open-quote – es wird ein öffnendes Anführungszeichen eingefügt.
Ein Beispiel:
ul li:before {
content: uri("bullet.gif");
}
Mit CSS3 wurde zudem der Pseudoselektor :not eingeführt. Hierüber lassen sich sehr einfach gezielt Inhalte auswählen. Ein erstes Beispiel soll zeigen, wie leistungsfähig dieser Pseudoselektor tatsächlich ist. Angenommen, ihr wollt alle Hyperlinks auswählen, die kein href-Attribut besitzen. Die entsprechende Syntax sähe folgendermaßen aus:
a:not([href])
"Normale" Hyperlinks blieben von dieser Syntax unberührt. Der Zugriff auf Anker-Definitionen würde darüber aber gelingen.
<a name="top">Seitenanfang</a>
Ein etwas ausführlicheres Beispiel soll die Leistungsfähigkeit von :not verdeutlichen. Innerhalb eines Dokuments wurden diverse Textabsätze definiert.
<body> <h1>PSD-Tutorials.de</h1> <p>Das ist ein Absatz.</p> <p>Das ist ein weiterer Absatz.</p> <div>Das ist ein Textbereich.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
Neben mit p gekennzeichneten Textabsätzen gibt es auch noch einen div-Bereich und einen Hyperlink. Nun soll Folgendes passieren:
• Alle mit p ausgezeichneten Absätze bekommen eine schwarze Schriftfarbe.
• Überall, wo keine p-Absätze stehen, wird hingegen Rot als Schriftfarbe verwendet.
Die entsprechende CSS-Syntax sieht folgendermaßen aus:
p {
color:#000;
}
:not(p) {
color:#ff0000;
}Das Prinzip der Vererbung
Eines der wichtigsten Dinge, wenn es um das Verständnis von CSS-Definitionen geht, ist die Vererbung. Tatsächlich werden in CSS die Stileigenschaften von einem auf das andere Element vererbt.
Ein Beispiel:
html {
color: red
}Durch diese Definition wird dem html-Element die Vordergrundfarbe Rot zugewiesen.
Aufgrund des Vererbungsprinzips gilt diese Farbdefinition nun zunächst einmal auch für alle Elemente, die html untergeordnet sind. Jetzt werden also von Hause aus zunächst einmal all die Elemente in Rot angezeigt, die unterhalb von html liegen. Vorteil dieser Variante: Für diese Elemente müsst ihr Rot nicht explizit als Farbe bestimmen. Was aber, wenn nun der Inhalt von p-Absätzen nicht in Rot angezeigt werden soll? Dann muss man die übergeordnete Farbdefinition von html überschreiben.
html {
color: red;
}
p {
color: #000;
}
Was passiert, wenn es nun zwei Elemente p und div gibt?
<body> <p>PSD-Tutorials.de</p> <div>Welt</div> </body>
Das Ergebnis sieht so aus:
Die Farbdefinition von html wirkt sich ausschließlich auf den Inhalt von div aus. Der p-Absatz hingegen wird in schwarzer Schrift angezeigt.
In CSS gibt es unterschiedliche Möglichkeiten, Stildefinitionen festzulegen. Das ist dann auch der Grund dafür, dass es für ein Element widersprüchliche Anweisungen geben kann. Für solche Fälle sieht CSS ein Gewichtungsprinzip vor. Anhand dieses Prinzips ist fest geregelt, welche der Anweisungen für ein Element Vorrang haben. Ich möchte an dieser Stelle nicht bis ins letzte Detail gehen, was dieses Prinzip betrifft. Ausführliche Informationen dazu findet ihr aber beispielsweise auf der Seite http://wiki.selfhtml.org/wiki/CSS/Kaskade oder auch unter http://www.thestyleworks.de/basics/cascade.shtml.
Worum es mir geht, ist, zu zeigen, worauf ihr achten müsst, wenn ihr CSS-Eigenschaften definiert. Dazu dient folgendes Beispiel:
<!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>Im Browser sieht das folgendermaßen aus:
Wie ihr seht, werden beispielsweise die mit strong ausgezeichneten Wörter unterschiedlich formatiert. Welche Art der Formatierung greift, hängt dabei schlussendlich von der Reihenfolge der Definitionen ab.
Alternativ dazu gibt es dann übrigens noch das Schlüsselwort !important, durch das ihr eine CSS-Anweisung als besonders wichtig kennzeichnen könnt.
<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>Auch hier wieder ein Blick auf das Ergebnis:
Lest euch in diesem Zusammenhang unbedingt auch noch mal die in diesem Tutorial genannten Quellen durch. (Auch wenn man für den Anfang sicherlich noch nicht zu tief in diese Thematik eindringen muss).
