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