Teil 2: CSS-Selektoren: Der Schlüssel zu funktionalem Webdesign
- 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
Kombinieren von mehrfachen Klassen Zu den besonders leistungsfähigen Aspekten der Klassenselektoren zählt die Fähigkeit, auf ein einziges HTML-Element mehrere verschiedene Klassen anzuwenden. Zum Beispiel der Absatz:...
Kombinieren von mehrfachen Klassen
Zu den besonders leistungsfähigen Aspekten der Klassenselektoren zählt die Fähigkeit, auf ein einziges HTML-Element mehrere verschiedene Klassen anzuwenden. Zum Beispiel der Absatz:
<p class="einrueckung gross">kann mithilfe von zwei Klassen wie folgt formatiert werden:
.einrueckung { padding-left: 2em; }
.gross { font-weight: bold;}Missbrauch von Klassen
Obwohl Klassenselektoren sehr leistungsfähig und flexibel sind, sollten sie nicht als Ersatz für HTML-Elemente dienen. Vor allem sollte man nicht das Fehlen bestimmter Elemente in der HTML-Auszeichnung durch Klassenselektoren imitieren.
Obwohl es viele gute Gründe gibt, um CSS-Klassen einzusetzen, darf man aber auch nicht vergessen, dass Klassen lediglich zusätzlich zu HTML-Elementen und keinesfalls anstatt dieser genutzt werden sollten.
Das Aussehen eines <div>- oder <p>-Elements ließe sich mit Klassenselektoren optisch etwa so gestalten, dass es einer Überschrift-Formatierung zum Verwechseln ähnlich aussehen würde, zum Beispiel:
.heading { font-weight:bold;
font-size: 140%; color: #600; }<div class="heading">Diese Über
schrift ist nicht echt</div>Dies stünde im krassen Widerspruch zum Prinzip der Barrierefreiheit. Zum anderen würde er die Code-Pflege erschweren.
Beim Einsatz von Klassen gilt: Weniger ist mehr. So sollte man das Erstellen überflüssiger Klassen genauso vermeiden, wie Wiederholungen der Klassenzuweisung zu untergeordneten Elementen, die die Klassenzugehörigkeit bereits ohnehin schon geerbt haben. Beispiel:
<div class="sidenav"><h1>Navigation</h1><ul><li> ... </li><li><a href="#"> ...</a></li><li> Listeneintrag </li></ul></div>die einzelnen Elemente einzeln selektiert werden über:
div.sidenav { ... }
div.sidenav h1 { ... }
div.sidenav ul { ... }
div.sidenav li { ... }
div.sidenav li a { ... }id-Selektoren
Mit einem ID-Selektor zielt man auf ein einzelnes Element der Dokumentstruktur, welches durch eine ID identifiziert wird.
#suche { ... }trifft auf ein beliebiges Element zu, welches über das id-Attribut suche verfügt.
Die Wirkung der Regel lässt sich von dem Typ des betreffenden Elementes abhängig machen. So wirkt sich diese CSS-Regel:
div#impressum { ... }nur dann auf ein Element mit dem id-Attribut impressum aus, wenn dieses mit dem div-Tag ausgezeichnet wurde. Eine ID (anders als eine Klasse) kann nur genau ein einziges Mal pro Dokument vorkommen.
Attribut-Selektoren
Attribut-Selektoren dienen zum Selektieren von Elementen auf Basis eines Attributs oder eines bestimmten Wertes eines Attributs. Sie sind an eckigen Klammern zu erkennen, zum Beispiel trifft
[href] { ... }
