Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Klassen & IDs

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Klassen & IDs

Um HTML-Elemente nicht auf der gesamten Seite einheitlich optisch zu verändern, sondern auch Unterschiede zwischen gleichen Elementen machen zu können, wurden in HTML die Attribute “class” und “id” festgelegt. Beide Attribute dienen außerdem dazu, die allgemeine Struktur eines Dokumentes zu verfeinern, indem die Seite z.B. in einzelne Bereiche wie Header, Navigation und Footer eingeteilt wird.

IDs

Für die Einteilung des Dokuments in verschiedene Bereiche verwendet man das Attribut “id”. Der vergebene Name darf jeweils nur einmal im gesamten Dokument vorkommen, sich also auf keinen Fall wiederholen. Folgendes wäre z.B. eine typische Verwendungsart für IDs:

<div id="header">Seitenkopf</div>
<div id="navigation">Navigationsmenü</div>
<div id="content">Seiteninhalt</div> 

Nun kann man anhand der IDs jedem Teil der Seite Position, Farbe, Ränder usw. zuweisen. In der CSS-Datei werden IDs mit einer Raute vor dem Namen angesprochen:

#header { ... }
#navigation { ... }
#content { ... }

Klassen

Für sich wiederholende Elemente innerhalb der IDs verwendet man nun das Attribut “class”. Möchte man z.B. in einer Tabelle den einzelnen Zeilen zur besseren Lesbarkeit abwechselnd eine andere Hintergrundfarbe geben, so könnte man ihnen folgende Klassen zuweisen:

<table>
 <tr class="ungerade"><td></td></tr>
 <tr class="gerade"><td></td></tr>
 <tr class="ungerade"><td></td></tr>
 ...
</table>

…und selbige im CSS dann mit einem Punkt vor dem Namen anscodechen…

td.ungerade { background: #FFF }
td.gerade { background: #EEE }

Die Tabellenzeilen erscheinen nun abwechselnd mit weißem und grauem Hintergrund.

Semantik

Gerade bei der Einteilung der Klassen sollte man unbedingt auch auf die Semantik achten, damit die Dokumentstruktur so weit es geht vom Layout getrennt ist. Auf keinen Fall sollte man z.B. für obiges Beispiel die Klassennamen “weiss” und “grau” verwenden, da diese bei einer Änderung des Layouts nicht mehr gültig wären. Aussagekräftige und v.a. funktionsbeschreibende Bezeichner sind das A und O gut strukturierter Dokumente und CSS-Dateien. Ein einfacher Merksatz könnte lauten: “Immer so wenig IDs und Klassen wie möglich einsetzen!” Hält man sich an diese Vorgabe, so ist der Lohn ein sauberer, logischer und für alle lesbarer Code.

Verschachtelung

Grundsätzlich geht man in CSS einfach mit Leerzeichen getrennt linear von den übergeordneten zu den untergeordneten Elementen vor. Für viele Situationen braucht man dabei weniger Klassen und IDs als häufig angenommen, wie das folgende Beispiel einer verschachtelten Liste zeigt, welche oft für vertikale Navigationsmenüs gebraucht wird:

<ul id="navigation">
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li>Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
  <li>Punkt 3</li>
</ul>

Wenn wir nun die Listenpunkte der untergeordneten Liste formatieren wollen, so können wir diese so anscodechen:

#navigation ul ul li { margin-left: 30px; }

Auf diese Weise würden wir den Listenpunkten einen linken Abstand von 30 Pixeln geben, damit diese etwas eingerückt werden. Um dem gerade ausgewählten Punkt ein anderes Aussehen zu verpassen, setzt man nun eine Klasse ein:

<ul id="navigation">
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li class="current">Punkt 2.1</li>
      <li>Punkt 2.2</li>
    </ul>
  </li>
  <li>Punkt 3</li>
</ul>

Nun kann man dem Punkt mit der Klasse "current" z.B. eine andere Hintergrundfarbe geben:

#navigation ul ul li.current { background: #EEE; }

Verwendet man in seinem Dokument, z.B. im Inhalt, nun weitere Listen, so bleiben selbige von diesen Anweisungen unberührt, da diese nur für die Liste mit der ID "navigation" gelten.

Weitere Informationen, Workshops und Artikel zum Thema finden Sie bei den weiterführenden Links.

Weiterführende Links

Kommentare

Jens Grochtdreis
am 12.12.2005 - 15:04

Durch ein Abstimmungsproblem hat sich leider die Veröffentlichung des Textes um einen ganzen Tag verzögert. Ich bitte das zu entschuldigen. Dem Inhalt hat das nicht geschadet.

Permanenter Link

Enrico Reinsdorf
am 12.12.2005 - 15:57

Der Quellcade einer verschachtelten Liste müsste doch so aussehen:

Punkt 1
Punkt 2

Punkt 2.1
Punkt 2.2

Punkt 3

Muss nicht due Unterliste in den -Kontainer?

Permanenter Link

Enrico Reinsdorf
am 12.12.2005 - 16:01

Soory, habe vergessen es auf Code umzustellen. also nochmal:


<ul>
<li>Punkt 1</li>
<li>Punkt 2
<ul>
<li>Punkt 2.1</li>
<li>Punkt 2.2</li>
</ul>
</>
<li>Punkt 3</li>
</ul>

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 12.12.2005 - 17:33

Enrico, du hast vollkommen recht.

Permanenter Link

Gabi
am 14.12.2005 - 18:57

... zumal die ID's gleichzeitig von PHP und/oder Javascript angesprochen werden können. Man schlägt bei der Verwendung von ID's für einmalig vorkommende Elemente also gleich zwei Fliegen mit einer Klappe.

Permanenter Link

Mathias Brodala
am 18.12.2005 - 13:38

"Um HTML-Elemente nicht auf der gesamten Seite einheitlich optisch zu verändern, sondern auch Unterschiede zwischen gleichen Elementen machen zu können, wurden in HTML die Attribute "class" und "id" festgelegt."

Das ist Unsinn. IDs sind schlicht und ergreifend zur logisch eindeutigen Bezeichnung von Elementen gedacht, so wie Klassen Elemente zu Gruppen zusammen fassen sollen. Das hat mit Optik nichts zu tun; dass CSS hierüber selektieren kann ist ein netter Nebeneffekt.

"Um dem gerade ausgewählten Punkt ein anderes Aussehen zu verpassen, setzt man nun eine Klasse ein:"

Sofern dieser Menüpunkt nicht noch einmal im Dokument vorkommt, wäre hier eine ID angemessen.

Permanenter Link

Die Kommentare sind geschlossen.