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

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…