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

1. CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
2. Teil 2: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
3. Teil 3: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
4. Teil 4: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
5. Teil 5: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
6. Teil 6: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
7. Teil 7: 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

© Archiv

<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>