Design

CSS: ID oder Klasse?

10. September 2003

Es gibt viele Wege, Stylesheets anzuwenden. Doch wann benutzt man Klassen? Wann eine ID als Selektor?

Einfach ausgedrückt ist eine Klasse (.class) allgemeiner zu handhaben. Sie kann auf einer Seite mehrfach angewendet werden und beliebig oft vorkommen.

 <h1 class="font">Überschrift 
</h1>
    

IDs hingegen sind spezieller. Sie dürfen nur einmal auftauchen, gelten aber in der CSS-Hierarchie als gewichtiger. Das heisst, im Notfall, wenn eine Klasse nicht zur Geltung kommen will, hat man mit einer ID bessere Chancen.

      <h1 ID="blau">Überschrift </h1>
    

Innerhalb der CSS Datei liest es sich dann so:

#blau {color : blue;}

Die Benutzung einer ID bietet einige Vorteile:

  • Sie kann als Sprungziel für Hyperlinks verwendet werden.
  • IDs können mit Javascript angesprochen werden. Das funktioniert über getElementById()
  • IDs überstimmen Klassen.
  • Quellcodes können genauer strukturiert werden,als mit den mehrfach vorkommenden Klassen.

Nachteile von IDs:

  • Eine ID darf auf einer Seite nur einmal verwendet werden. Auch wenn so mancher Browser das anders sieht.
  • IDs können nicht wie Klassen kombiniert werden.

Probleme in Sachen Browserverträglichkeit gibt es nicht. Klassen und IDs können gemeinsam genutzt werden. Beispiel:

      <h1 class="font" 
ID="blau">Überschrift </h1> 

Auf diesen Seiten zum Beispiel wird die ID für das eigentlich Layout mit Containern verwendet, während die Klassen für Formatierungen zum Einsatz kommen.

Kommentar hinzufügen

Diese E-Mail ist schon registriert. Bitte benutzen Sie die Login-Form oder geben Sie andere ein.

Sie haben nicht korrektes Login und Passwort eingegeben

Entschuldigen, aber Sie müssen zugriffen, um das Kommentar zu schreiben.

7 Kommentare

chronologisch
nach der Bewertung zuerst neue chronologisch
1

Danke, super erklärt und leicht verständlich.

2

Eine gute Erklärung soweit. Ähnlich weit bin ich auch schon gekommen, allerdings ohne es so gut formulieren zu können. Vielleicht bekomme ich hier die Antwort auf eine Frage, nach der ich schon das halbe Netz (mindestens) abgesucht habe.



Ich habe im Blog die Seitenleisten-Grundstruktur als ID, nun möchte ich mehrere Seitenleisten einbinden, die als Klasse definiert sind. Prinzipiell läuft das ja so ab:

. Für eine Leiste ist das klar. Nun sollen aber 3 Leisten in einer PHP-Datei verfügbar gemacht werden, diese PHP-Datei möchte ich dann einfach über get_sidebar aufrufen und einbinden. Verschachtele ich dann so?

...inhalt......inhalt...

Ich möchte das Blog, das bis jetzt alle Änderungen XHTML-valide "überstanden" hat, auch so lassen. Eine Anregung diesbezüglich wäre klasse! Sinn & Zweck: Die Seitenleisten sollen unter die Posts, dann aber 3 Säulen nebeneinander, die jeweils einzeln mit Inhalten bestückt werden können.

Jörg

3

Buh, danke...bin gerade fast ausgeflippt.

Ich hatte einfach nicht den Fehler gefunden, warum eine Eigenschaft vererbt wurde.





Dankeschön

4

Alle wichtige Punkte gut erklärt, bleibt aber trotzdem die Frage - Was hat man sich den gedacht bei ID's und Classen?

5

Danke für die Info! :-)

6

Super, wollte nur wissen ob man IDs und Klassen zusammen verwenden kann. Und hier steht es! Klasse!

7

Ahh jetzt! Bei jedem Layout seit Jahren steh ich vor der gleichen Frage. Hier ist sie verständlich erklärt! Vielen Dank.