CSS: ID oder Klasse?

Kein Beitragsbild

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

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

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

    Dankeschön

  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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.