CSS: ID oder Klasse?

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Florian
Gast
7 Jahre 5 Monate her

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

kunstgriff
Gast
7 Jahre 1 Monat her
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… Read more »
Marie
Gast
Marie
6 Jahre 11 Monate her

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

Dankeschön

Ed
Gast
6 Jahre 10 Monate her

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

Melanie
Gast
6 Jahre 9 Monate her

Danke für die Info! :-)

Konsti
Gast
Konsti
6 Jahre 5 Monate her

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

Neulichblog
Gast
6 Jahre 6 Tage her

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

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen