Effizient formatieren

CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign

30.9.2009 von Redaktion pcmagazin und Anna Kobylinska

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.

ca. 1:35 Min
Ratgeber
  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
CSS-Selektoren
CSS-Selektoren
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.