Design

CSS: ID oder Klasse?

10. September 2003
von

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.

7 Kommentare zu „CSS: ID oder Klasse?
  1. Florian am 8. Dezember 2008 um 19:25

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

  2. kunstgriff am 31. März 2009 um 22:33

    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. Marie am 28. Mai 2009 um 18:59

    Buh, danke…bin gerade fast ausgeflippt.
    Ich hatte einfach nicht den Fehler gefunden, warum eine Eigenschaft vererbt wurde.

    Dankeschön

  4. Ed am 27. Juni 2009 um 18:45

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

  5. Melanie am 5. August 2009 um 13:55

    Danke für die Info! :-)

  6. Konsti am 18. Dezember 2009 um 00:22

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

  7. Neulichblog am 19. Mai 2010 um 20:25

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

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!