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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…