css-café

Beispiele

Pseudoklassen gestatten eine Auswahl nach Kriterien, die so dem Quelltext nicht zu entnehmen sind. Sie können auch auf Aktionen des Anwenders eingehen, zum Beispiel aktivierte Checkboxen und ähnliche.

Syntax: E:enabled

Beispiel:
input[type="text"]:enabled {
background:#cfc;
}

Hintergrundfarbe für Formelemente mit dem Status „enabled”.

Syntax: E:disabled

Beispiel:
input[type="text"]:disabled {
background:#ccc;
}

Hintergrundfarbe für Formelemente mit dem Status „disabled”.

Syntax: E:checked

Beispiel:
input:checked {
border: 3px solid #c39;
}

Aktivierte Check- oder Radiobuttons erhalten einen Rahmen.

Syntax: E:target

Beispiel:
h3#ziel:target {
outline: 1px solid #ff9;
}

Das dazu passende HTML könnte zum Beispiel so aussehen:

Seite 1 mit Link auf einen Anker in Seite 2
<a href="seite2.html#ziel">Sprungziel</a>

Seite 2 mit dem Element
<h3 id="ziel">Heading</h3>

Klickt man den Link, wird das Sprungziel mit einer outline hervorgehoben.

HTML:
1) <p><a href="testcase2.html#drei">Testcase</a></p>
2) <h3 id="drei">Heading</h3>

Syntax: E:not(s)

Beispiel:
:not(p) {
border:1px solid #ccc;
}

Die Negations-Pseudoklasse akzeptiert einfache Selektoren als Argument. Im Beispiel wird jedes Element, das nicht ein <p>-Element ist, mit einem Rahmen versehen.

Pseudoelement

Beachten Sie, dass für neue Pseudoelemente (ab CSS3) die ::-Schreibweise genutzt werden muss. Für ältere Pseudoelemente (CSS1, 2) soll aus Kompatibilitätsgründen auch die :-Schreibweise akzeptiert werden.

Syntax: E::selection

Beispiel:
p::selection {
background-color: #cc0000;
color: #fff;
}

Vom Anwender selektierter Text innerhalb eines Absatzes wird weiß auf rot dargestellt.