Effizient formatieren

CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

Der Schlüssel zu funktionalem Webdesign, Browser-Kompatibilität und wartungsfreundlichem Code ist der gekonnte Einsatz von CSS-Selektoren. Internet Magazin erklärt, worauf es dabei ankommt.

CSS-Selektoren

© Archiv

CSS-Selektoren

Bei Selektoren handelt es sich um den Teil einer CSS-Regel, die festlegt, auf welche Elemente die betreffende Regel angewendet wird. Mithilfe von CSS-Selektoren werden dem Browser bestimmte Seitenelemente aufgezeigt, um deren Position und Darstellung zu beeinflussen.

Die verschiedenen Arten von CSS-Selektoren beinhalten Typ-Selektoren, Klassen-Selektoren und ID-Selektoren. Typ-Selektoren zeigen auf alle Instanzen eines Seitenelementes, das im Quelltext mit ganz bestimmten HTML-Tags gekennzeichnet wurde (zum Beispiel: h1 für alle Überschriften der ersten Ebene).

Klassen-Selektoren treffen auf beliebige Seitenelemente zu, die einer bestimmten Klasse angehören (zum Beispiel: .warnung). Ein ID-Selektor trifft in einem Dokument auf genau ein einziges Element eines beliebigen Typs zu (zum Beispiel: #menuepunkt16). Darüber hinaus gibt es den Universal-Selektor '*', der sich auf jeden Elementtyp bezieht.

Cascading Stylesheets verdanken ihre Flexibilität unter anderem der Vielfalt möglicher Kombinationen zwischen verschiedenen CSS-Selektoren. Zum einen lassen sich so Elemente formatieren, die in einer bestimmten Beziehung zueinander stehen, zum anderen aber auch Elemente mit ganz bestimmten Eigenschaften.

In die erstere dieser beiden Kategorien fallen unter anderem Nachfahren-Selektoren, Kind-Selektoren, Erstes-Kind-Pseudo-Selektoren und Nachbar-Selektoren. Mit Attribut-Selektoren kann man schließlich auf solche Elemente zielen, die bereits bestimmte zuvor definierte Eigenschaften aufweisen.

Mit Pseudolink-Klassen und dynamischen Pseudolink-Klassen ist es möglich, den Interaktivitätsstatus eines Elementes beim Regeln seiner Position und Darstellung zu berücksichtigen.

Typ-Selektoren

Ein Typ-Selektor zielt auf alle Elemente der Dokumentstruktur ab, die seinem Namen entsprechen, unabhängig davon, wo sich diese Elemente genau in dem Dokument befinden, zum Beispiel:

em { color: red; }

färbt alle Inhalte rot ein, die mittels:

<em></em>

ausgezeichnet sind.

Klassen-Selektoren

Während Typ-Selektoren jede Instanz eines bestimmten Elementes der Dokumentstruktur betreffen, kommt es manchmal darauf an, mit einer CSS-Regel mehrere Elemente zu beeinflussen, die mit völlig verschiedenen Tags ausgezeichnet sind. In diesem Fall kommen Klassen-Selektoren zum Einsatz. Zum Beispiel:

*.warnung { ... }

zielt auf alle Elemente ab, die der Klasse warnung angehören. Der Universal-Selektor * muss nicht explizit genannt werden, er wird hier automatisch angenommen.

Beim Selektieren einer Klasse lässt sich die Wirkung der CSS-Deklarationen auf Elemente eines Typs einschränken, zum Beispiel mittels:

p.warnung { ... }

werden im Rahmen der Klasse warnung nur Absätze berücksichtigt.

Verschiedene Elemente derselben Klasse können unterschiedlich gehandhabt werden, zum Beispiel:

div.warnung { color:blue;}
td.warnung { color:yellow;}

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​".