Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Der Beitrag "Alle CSS3 Selektoren im Detail" besteht aus fünf Seiten

Pseudoklassen (Pseudo-classes) - Alle CSS3 Selektoren im Detail

Diese Selektoren heißen »Pseudoklassen«, da sie kein statisches HTML steuern, sondern auf Informationen basieren, die vom Browser »geliefert« werden und damit beispielsweise das Benutzerverhalten schließen lassen. Wie zum Beispiel, ob ein Link bereits besucht wurde oder ob eine Checkbox aktiviert ist.

Andere Informationen vom Browser betreffen Aufbau der HTML-Struktur, so zum Bespiel, ob ein Listenpunkt der erste oder letzte in einer Liste ist, oder ob ein HTML-Element leer ist.

Alle Pseudoklassen beginnen mit einem : (Doppelpunkt) und folgen mit einem festen Schlüsselwort, welches die Eigenschaft der Pseudoklasse definiert. Diese können mit einem Einfachselektor kombiniert werden und greifen dann nur dort, können aber auch eigenständig im CSS stehen, wirken sich dann auf das komplette HTML aus.

Eine Gruppe von Pseudoklassen sind die »dynamischen« Pseudoklassen, welche das Aussehen und Verhalten von Links steuern:

Dynamischen Pseudoklassen (Dynamic pseudo-classes)

Pseudoklasse Beschreibung
:link Steuert Links, die noch nicht angeklickt wurden.
:visited Steuert Links, die bereits angeklickt wurden und damit in der Historie des Browser zu finden sind.
:active Steuert den Link in dem Moment, wenn er von dem Benutzer angeklickt wird.
:hover Steuert den Link, den der Benutzer mit der Maus überfährt.
:focus Steuert den Link, an dessen Position sich der Benutzer beim "Tabben" befindet.

Die Pseudoklasse :visited ist dabei die unzuverlässigste. Auch in vielen modernen Browsern greift diese nur, wenn für dasselbe Element eine :link-Pseudoklasse vergeben wurde.

Ebenfalls sollte die Reihenfolge :link, :visited, :hover, :focus, :active eingehalten werden, da die einzelnen Zustände mit einander »konkurrieren« und ein :visited hinter einem :hover dieses deaktivieret.

Praxistipp
Ein :hover weist Nutzer auf einen Link hin. Davon profitieren jedoch nur Mausbenutzer. Definieren Sie eine solche Regel immer auch für die Pseudoklasse :focus, damit bedienen Sie Tastaturbenutzer in gleicher Weise mit einer guten Usability!

:target - Target-Pseudoklasse (Target pseudo-class)

CSS3 hat eine besondere Neuerung: Die Zielpseudoklasse oder Target-Pseudoklasse steuert die Sprungmarke, die über einen Sprunglink angesteuert wird und bietet damit die Möglichkeit, HTML-Elemente hervorzuheben in dem Moment, wo sie angesprungen werden.

:lang(de) - Sprachpseudoklasse (Language pseudo-class)

Ebenfalls neu in CSS3 ist eine Sprachpseudoklasse. Mit dieser Pseudoklasse haben sie die Möglichkeit, die Sprache des ganzen Dokuments oder einzelner Bereiche zu erkennen.

Über den Selektor :lang steuern Sie HTML-Elemente mit einer bestimmten Sprachauszeichnung. Dabei kann das lang-Attribut für das Element selber vergeben sein, aber auch eine geerbte Spracheigenschaft mit dieser Pseudoklasse angesprochen.

Ein relevantes Beispiel aus der Praxis stellen Anführungszeichen dar: Im Deutschen werden für direkte Rede oder Zitate doppelte Anführungszeichen unten und oben „...“ verwendet, im Englischen doppelte Anführungszeichen nur oben “...“, im Französischen sogenannte Guillemets »...«. So können Sie über die Sprachpseudoklasse und über die CSS-Eigenschaft quotes die richtigen Anführungszeichen für die entsprechende Sprache setzen.

Userinterface-Pseudoklasse (UI element states pseudo-classes)

Ebenfalls neu in CSS3 sind Userinterface-Pseudoklassen. Darüber können Zustände der Formularelemente angesprochen werden und beispielsweise ein Eingabefeld, das über disabled für die Eingabe »gesperrt« ist, anders gestalten.

Userinterface-Pseudoklasse Beschreibung
:enabled Steuert Formularfelder, in die Werte eingegeben werden können bzw. deren Bedienung möglich ist.
:disabled Steuert Formularfelder, die über das Attribut disabled für die Eingabe gesperrt sind bzw. deren Bedienung nicht möglich ist.
:checked Steuert Checkboxen oder Radioboxen, die aktiviert sind.

Negationspseudoklasse (Negation pseudo-class)

Mit der im Englischen als »negation pseudo-class« bezeichneten Negationspseudoklasse erfüllt CSS3 einen Wunsch, den viele Frontendentwickler schon lange hatten. Nicht immer möchte man etwas konkret ansprechen, manchmal möchte man auch etwas ausschließen.

Negationspseudoklasse Beschreibung Code-Beispiel
:not(Element) Steuert alle Elemente außer dem Element, welches in der Klammer angegeben ist. :not(Element)
:not(ol){
   ...
}

Mit dieser Anweisung würden Sie alle Element steuern, nur keine ol.

Ein sinnvoller Ansatz ist die Kombination mit einem anderen Einfachselektor:

section :not(ol) {
   ...
}

Mit diesem Beispiel wäre ein Nachfahrselektor (siehe nächsten Abschnitt) definiert, der alle HTML-Elemente innerhalb einer section ansprechen würde, nur ol wären von der Anweisung ausgeschlossen.

Code-Beispiel für die Negationspseudoklasse :not(Element)

HTML

<p id="demo-negationspseudoklasse">Dies ist ein Satz mit einem 
    <strong>strong</strong>, 
    einem 
    <span>span</span> 
    und einem 
    <abbr>abbr</abbr>.
</p>

Das HTML besteht aus einem Satz mit drei unterschiedlichen Inline-Elementen.

CSS

#demo-negationspseudoklasse *:not(strong) {
   color: red;
   font-size: 200%;
}

Über den Selektor #demo-negationspseudoklasse * werden alle Elemente innnerhalb des p-Elements rot gefärbt und auf die doppelte Höhe gesetzt. Über die Kombination mit der Negationspseudoklasse :not(strong) wird das strong-Element von dieser Regel »ausgeschlossen«.

So sieht's aus

Dies ist ein Satz mit einem strong, einem span und einem abbr.

In der Ansicht bleibt das strong von der CSS-Regel unbeeinflusst.


Weitere Seiten des Beitrags "Alle CSS3 Selektoren im Detail"

Buchempfehlungen