Zur Navigation

CSS: Unterschied zwischen ids und Klassen

1 schabiodinko

Hallo zusammen!

Mir ist leider nicht so ganz klar, wie sich ids und Klassen unterscheiden. Wann verwende ich eine id und wann eine Klasse? Und wie definiere ich diese, sprich wann verwende ich die Raute und wann den Punkt vor der Definition?

Vielen Dank für eure Hilfe und schöne Grüße! :)

21.07.2011 13:23

2 Jörg

Eine ID kann pro Seite nur einmal verwendet werden
z.B. ein Header, der nur einmal auf einer Seite vorkommt:

<div id="header"></div>

Bei einer Klasse gibt es diese Einschränkung nicht
z.B. mehrere Textboxen:

<div class="textbox"></div>
<div class="textbox"></div>
<div class="textbox"></div>

Im CSS verwendest du eine Raute zur Kennzeichnung einer ID und einen Punkt zur Kennzeichnung einer Klasse::

div#header {  }
div.textbox {  }

21.07.2011 13:54 | geändert: 21.07.2011 13:54

3 schabiodinko

Wunderbar, das klingt doch sehr einleuchtend! Ich danke dir! :)

Demnach könnte ich ja einfach immer auf Nummer sicher gehen und stets eine Klasse verwenden, weil ich diese schließlich an mehreren Stellen einsetzen könnte, sollte es später notwendig werden. Oder ist das schlechter Stil und sollte man bei einmaligen Elementen generell eine ID zuweisen?

21.07.2011 13:59

4 Jörg

Im Zweifelsfall, also wenn ein Element nicht einzigartig bleiben könnte, würde ich auch eine Klasse verwenden.

Eine ID hat m.E. den Vorteil, dass ich das Element in JavaScript leichter ansprechen kann (mit getElementById()). Zudem lässt sich bei einer späteren Analyse des Quelltextes schneller erkennen, dass es das Element nur einmal gibt - wenn ich am CSS dann etwas ändern will, muss ich nicht erst noch nach etwaigen anderen Klassen-Elementen suchen, die dann auch von den Änderungen betroffen sind.

21.07.2011 14:10 | geändert: 21.07.2011 14:10

5 schabiodinko

Kann auf eine Klasse über JavaScript nicht zugegriffen werden?

21.07.2011 14:58

6 Jörg

getElementsByClassName() funktioniert noch nicht in allen Browsern (insbesondere dem IE):

http://www.quirksmode.org/dom/w3c_core.html#gettingelements

Man könnte etwas umständlich in einer Schleife den classname abgleichen. Mit einem Framework wie jquery geht's natürlich auch relativ einfach. Ansonsten sind IDs aber leichter zu handhaben

21.07.2011 15:23

7 schabiodinko

Na gut, dann werde ich mich nach Möglichkeit auf ids beschränken. Vielen Dank für die Tipps!

22.07.2011 22:52

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]