Mitunter soll das erste Element eines HTML-Konstrukts per CSS speziell gestaltet werden, z.B. was dessen Außenabstände angeht. Diese Anforderung gibt es in zwei Ausprägungen:

1. Das zu behandelnde Element ist das erste Element, das dem Bezugselement folgt.

2. Das zu behandelnde Element ist das erste Element, das dem Bezugselement untergeordnet ist.

Diese beiden Element-Anordnungen erfordern unterschiedliche CSS-Selektoren.

Element folgt auf Bezugselement

1 <X>...</X>
2 <Y>
3   ...
4 </Y>
5 ...

Der CSS-Selektor lautet:

1 X + * {
2     ...
3 }

Bezugselement ist X. Der Selektor + selektiert das unmittelbar folgende Element. Der Universelle Selektor * füllt hier syntaktisch die zweite Argumentposition des Selektors und nimmt keine weitere Einschränkung vor.

Beispiel: Jedes erste Element nach einer <h1>-Überschrift soll einen oberen Außenabstand von 0.5em erhalten:

1 h1 + * {
2     margin-top: 0.5em;
3 }

Element ist Bezugselement untergeordnet

1 <X>
2   <Y>
3     ...
4   </Y>
5 </X>

Der CSS-Selektor lautet:

1 X > *:first-child {
2     ...
3 }

Bezugselement ist X. Der Selektor > selektiert alle Elemente, die dem Bezugselement direkt untergeordnet sind. Die Pseudoklasse *:first-child schränkt diese Menge auf das erste Kindelement ein (der Stern kann auch weggelassen werden).

Beispiel: Jedes erste Unterelement eines <dd>-Definitionsabschnitts soll keinen oberen Außenabstand besitzen, sondern direkt an den Definitionsterminus <dt> anschließen:

HTML:

1 <dl>
2   <dt>...</dt>
3   <dd>
4     <Y>
5       ...
6     </Y>
7   </dd>
8   ...
9 </dl>

CSS:

1 dd > *:first-child {
2     margin-top: 0;
3 }

Die Browser benutzen unterschiedliche Wege, Listen einzurücken. Einige rücken per Padding ein, andere per Margin.

Soll die Einrückung portabel verändert werden, müssen margin-left uns padding-left also zusammen gesetzt werden, und zwar eine Angabe auf die gewünschte Einrückung und die andere auf 0.

oder

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.

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 eine 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 ein künstliches Wurzelelement, 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.

In HTML:

<table cellspacing="0">

Per CSS (#t sei die Tabelle):

#t {
  border-collapse: collapse;
}

#t > td {
  padding: 0;
}

Layout mit Kopf, Fuss und drei Spalten:

Der HTML- und CSS-Code, der dies realisiert:

<div id="header">
Header
</div>
<div id="left">
Left
</div>
<div id="right">
Right
</div>
<div id="middle">
Middle
</div>
<div id="footer">
Footer
</div>

#header {
  clear: both;
}
#left {
  float: left;
  width: 80px;
}
#right {
  float: right;
  width: 80px;
}
#middle {
  padding: 0 80px 0 80px;
}
#footer {
  clear: both;
}

Anmerkungen

• Die Farben und die Höhe der Elemente sind weggelassen, da diese mit der Lösung nichts zu tun haben.
• Die Breite von #header, #middle und #footer passt sich dem zur Verfügung stehenden Raum dynamisch an.
• Die Reihenfolge der divs in HTML ist signifikant. Das div #middle kommt nach #left und #right.
• "clear: both;" bei #header bewirkt, dass neben dem Header kein Float platziert wird. D.h. die beiden Floats #left und #right werden vom Browser darunter platziert.
• Durch "float: left;" wird das Element #left links platziert. Analog wird Element #right durch "float: right;" rechts platziert. Die Breitenangabe "width: 80px;" weist den Floats ihren (fixen) horizontalen Raum am linken und rechten Rand zu.
• Das Element #middle hat keine clear-Angabe und kann daher zwischen die Elemente #left und #right treten. Damit der Inhalt des div sich nicht mit den Randelementen überschneidet, wird mit "padding: 0 80px 0 80px;" ein Padding eingestellt, das den Raum, der von den Randelementen belegt wird, ausspart. Die Reihenfolge der Angaben ist: oben, rechts, unten, links.
• "clear: both;" bei #footer verhindert, dass beim horizontalen Verkleinern des Fensters die oberen Floats neben oder unter den Footer springen.
• Die Konstruktion aus den fünf divs kann in den HTML <body> oder eine Tabellenzelle <td> eigebettet werden.