Effizient formatieren

Teil 4: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

Das id-Attribut

Attribut-Selektoren können auch auf Elemente mit dem id-Attribut zielen, zum Beispiel selektiert der Attribut-Selektor [id="hilfe"] dasselbe Element wie der ID-Selektor #hilfe. Der Unterschied: ID-Selektoren haben eine höhere Spezifität und damit Vorrang vor Attribut-Selektoren.

Gruppieren und Beziehungen

Um die Lesbarkeit von CSS-Stylesheets zu vereinfachen und ihren Wartungsaufwand zu minimieren, können Sie CSS-Selektoren gruppieren, indem Sie ihre (vollständigen) Namen mit Kommata trennen:

#id1 td, #id1 th { ... }

Um die zu selektierenden Elemente im Kontext anderer Objekte präzise zu bestimmen, nutzt man Selektoren, die sich die Vererbungs-Beziehungen zunutze machen. Zu dieser Kategorie zählen Nachfahren-Selektoren, Kind-Selektoren und Nachbar-Selektoren.

Ein Nachfahren-Selektor peilt Elemente eines bestimmten Typs an, die in der Dokumentstruktur von einem anderen Element direkt oder indirekt abstammen. Ein Nachfahren-Selektor nennt das Vorfahrenelement, dann das Nachfahrenelement und trennt ihre Namen durch Zeichen wie einen Freiraum, CR (Zeilenvorschub), LF (Zeilenende), FF oder einen Tabulator. Zum Beispiel kann bei einem Dokument mit einer Struktur wie dieser

CSS-Selektoren

© Archiv

Klassen-Selektoren lassen sich auf Elemente eines bestimmten Typs einschränken.
<ul><li>Eintrag (1)</li><li><ol><li>untergeordnet (2A)</li><li> untergeordneter (2B)</li></ol></li><li>Eintrag (3)</li></ul>

jede <li>-Element mithilfe eines Nachfahren-Selektors adressiert werden.

ul li { ... }

betrifft also in dem obigen Beispieldokument alle fünf <li>-Elemente beider Listenebenen, denn alle stammen selbstverständlich von einem <ul>-Element ab.

Um nur solche untergeordneten Elemente anzuwählen, die mit dem Vorfahrenelement direkt verwandt sind, kommen Kind-Selektoren zum Einsatz, zum Beispiel:

ul>li { ... }

Der Selektor ul>li wird in dem obigen Beispiel nur die drei Einträge beeinflussen, welche direkt von dem <ul>-Element abstammen. Die beiden anderen Elemente (2A) und (2B) fühlen sich nicht angesprochen. Zwischen ihnen und dem <ul>-Vorfahrenelement liegt das <ol>-Element, wodurch die benötigte Beziehung in diesem Fall nicht zustande kommt.

Ein direkt benachbarter Geschwister-Selektor (adjacent sibling selector) wählt ein Element aus, welches direkt von demselben Vorfahrenelement stammt und sich in unmittelbarer Nachbarschaft befindet. Zum Beispiel wird die CSS-Regel

h1+p { ... }

auf ein <p>-Element angewendet, das sich in direkter Nachbarschaft einer <h1>-Überschrift befindet und demselben Element untergeordnet ist. So wird bei

<h1>Überschrift 1</h1><p>Absatz 1.</p><p>Absatz 2.</p>

mit dem Selektor h1+p nur der erste Absatz berücksichtigt: Er befindet sich in direkter Nachbarschaft von h1 und teilt sich mit ihr ein gemeinsames Vorfahrenelement. Nicht erfüllt sind die Bedingungen hier:

<h1>Überschrift 2</h1><div><p>Absatz 3.</p></div>

Der Selektor h1+p greift aber durchaus in diesem Fall auf den Absatz Nr. 4:

<h1>Überschrift 3</h1>
Etwas Text.<p>Absatz 4.</p>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".