Problem
Ein aus mehreren Elementen bestehendes HTML-Konstrukt soll in seinem Aussehen frei gestaltbar sein. Wie lässt sich dies mit CSS erreichen?
Beispiel
Gegeben sei ein Inhaltsverzeichnis, bestehend aus einer Überschrift (h1) und verschachtelten Listen (ul, li) mit Links (a) auf die Dokument-Abschnitte.
| 1 | <h1>Title</h1> |
| 2 | <ul> |
| 3 | <li> |
| 4 | <a href="#section_1">Section 1</a> |
| 5 | <ul> |
| 6 | <li> |
| 7 | <a href="#section_1_1">Section 1.1</a> |
| 8 | <ul> |
| 9 | <li> |
| 10 | <a href="#section_1_1_1">Section 1.1.1</a> |
| 11 | </li> |
| 12 | <li> |
| 13 | <a href="#section_1_1_2">Section 1.1.2</a> |
| 14 | </li> |
| 15 | </ul> |
| 16 | </li> |
| 17 | <li> |
| 18 | <a href="#section_1_2">Section 1.2</a> |
| 19 | </li> |
| 20 | </ul> |
| 21 | </li> |
| 22 | <li> |
| 23 | <a href="#section_2">Section 2</a> |
| 24 | </li> |
| 25 | </ul> |
Der HTML-Code wird ohne CSS vom Browser (Firefox) ungefähr so dargestellt (die Strukturelemente für den Titel (h1) und die Listen (ul) sind zur Verdeutlichung grau hinterlegt):
Lösung
Um ein HTML-Konstrukt aus mehreren Elementen per CSS anpassbar zu machen, gehen wir folgendermaßen vor:
-
Wir geben dem Wurzelelement des Konstruktes eine eindeutige Bezeichnung und weisen ihm hierzu eine Id oder einen Klassennamen (oder beides) zu.
1 <ELEMENT id="my-toc-4711" class="my-toc"> 2 ... 3 </ELEMENT> Eine Id verwenden wir, wenn wir ein bestimmte Instanz des Konstrukts gestalten wollen. Wollen wir alle Instanzen des Konstruktes gestalten, verwenden wir einen Klassennamen.
-
Hat das Konstrukt kein Wurzelelement, wie im Beispiel, denn auf oberster Ebene stehen hier zwei Elemente: h1 und ul, erzeugen wir eins, indem wir das Konstrukt in ein <div> einfassen.
1 <div class="my-toc"> 2 HTML 3 </div> Ein Wurzelelement zu haben, ist in vielerlei Hinsicht praktisch, denn es kann Definitionen aufnehmen, die das Konstrukt als Ganzes (Hintergrund, Abstände, etc.) oder alle seine Subelemente betreffen (Texteigenschaften etc.).
-
Im Stylesheet adressieren wir die Elemente ausgehend vom Wurzelelement mit entsprechenden Selektoren. Bei obiger Inhaltsverzeichnis-Struktur könnte dies so aussehen:
1 .my-toc { 2 /* das gesamte Konstrukt */ 3 } 4 .my-toc h1 { 5 /* die Überschrift */ 6 } 7 .my-toc ul { 8 /* die Liste der Ebene 1 */ 9 } 10 .my-toc ul ul { 11 /* die Listen der Ebene 2 */ 12 } 13 .my-toc ul ul ul { 14 /* die Listen der Ebene 3 und tiefer */ 15 } 16 .my-toc a { 17 /* alle Links */ 18 } -
Weitere Klassennamen oder Ids werden innerhalb des Konstruktes nicht benötigt, es sei denn, es liegt der eher seltene Fall vor, dass CSS-Selektoren die erforderliche Elementauswahl nicht treffen können. Beispiel: gerade oder ungerade Zeilen einer Tabelle.
