[CSS3] Pseudo-Spielchen

Genau genommen ist die Überschrift nicht ganz korrekt. Es geht es hier nicht in erster Linie um CSS3, denn viele der Pseudoelemente bzw. -klassen gab es schon mit CSS2 oder früher. Dennoch wird es im Zusammenspiel mit den Möglichkeiten, die uns CSS3 bietet, erst richtig spannend. Jeder von uns, so hoffe ich zumindest, kennt die Pseudoklasse :hover. Auch :active oder :visited dürften dem ein oder anderem bekannt sein. Aber wie steht’s mit :first-letter, :before oder :after?

Neugierig?

Pseudoelemente oder -klassen sind, wie der Name schon sagt, keine eigenständigen Elemente oder Klassen. Sie benötigen und beziehen sich immer auf ein anderes Element oder eine andere Klasse.

Es gibt eine ganze Reihe von Pseudoelementen und -klassen. Ich habe mal die interessantesten für euch zusammengetragen:

• :link = für Verweise zu noch nicht besuchten Seiten
• :visited = für Verweise zu bereits besuchten Seiten
• :focus = für Elemente, die den Fokus erhalten, z.B. durch „Durchsteppen“ mit der Tabulator-Taste (CSS 2.0)
• :hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
• :active = für gerade angeklickte Elemente

• :first-child (Pseudoklasse) = das Element, das das erste Kindelement eines anderen Elements ist erhält die CSS-Eigenschaften
• :nth-child (Pseudoklasse) = das Element des Kindelements, das im Parameter aufgerufen wird, erhält die CSS-Eigenschaften
• :first-line (Pseudoelement) = die erste Textzeile des Elements erhält die CSS-Eigenschaften
• :first-letter (Pseudoelement) = das erste Zeichen des Textes erhält die CSS-Eigenschaften

• :before = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
• :after = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

Schauen wir uns nun mal einige davon etwas genauer an.

Mittels :first-child wird das erste „Kind“-Element eines „Eltern“-Elements angesprochen. So kann beispielsweise der erste Eintrag in einer Liste anders gestaltet werden:

[css]li {
color: #000;
}

li:first-child {
color: orange
}[/css]

Dementsprechend kann mit :nth-child gezielt ein bestimmtes (hier das zweite)

[css]li {
color: #000;
}

li:nth-child(2) {
color: orange
}[/css]

oder auch mehrere „Kind“-Elemente bestimmt werden (hier jedes zweite)

[css]li {
color: #000;
}

li:nth-child(2n) {
color: orange
}[/css]

Das Element :first-letter spricht das erste Zeichen eines Absatzes an. So können wir diesem beispielsweise eine größere Schrift zuweisen:

[css]p {
font-size:14px;
}

p:first-letter {
font-size:30px;
}[/css]

Kommen wir zu den heimlichen Stars der Pseudoelemente: :before und :after. Diese fügen vor oder nach einem Element einen beliebigen Inhalt ein, der mit content angegeben wird. Das können Zeichen, Text, Grafik und vieles mehr sein. Damit habt ihr ein Werkzeug zur Verfügung um per Style-Deklaration Inhalte zu definieren. Klasse, oder?

Einfaches Beispiel:

[css].box {
position: relative;
margin: 100px;
background: #000;
width: 200px;
height: 100px;
color: #fff;
font-size: 16px;
line-height: 100px;
text-align: center;
}

.box:before {
content:":before";
position: absolute;
top: -50px;
left: 0;
width: 200px;
height: 40px;
background: orange;
line-height: 40px;
}

.box:after {
content:":after";
position: absolute;
bottom: -50px;
left: 0;
width: 200px;
height: 40px;
background: red;
line-height: 40px;
}[/css]

Da :before und :after immer einen Inhalt erwarten, ist es wichtig, dass content definiert wird, auch wenn die Elemente gar keinen Inhalt ausgegeben. Habt ihr einen solchen Fall, definiert ihr dies mit Anführungszeichen ohne Inhalt:

[css].box:before {
…
content: "";
…
}[/css]

Nun aber genug der Theorie. Lasst uns ein paar Beispiele ansehen. Ich habe da mal was für euch vorbereitet. Hier geht’s lang:

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: