Was ist bei HTML/CSS der Unterschied zwischen ID und CLASS?

6 Antworten

knaake10
26.06.2014, 10:35

Eine ID kannst Du nur einem einzigen Objekt geben und jedes Objekt kann auch nur maximal eine einzige ID haben. Eine Classe kannst Du an beliebig viele Objekte vergeben und jedes Objekt kann auch beliebig viele Klassen haben.

Beispiele :

Du willst den Wert eines Input Feldes abfragen. Dann brauchst Du eine ID, weil Du ja nur diesen einen Wert haben möchtest.

Du willst das in einer Gruppe von Inputfeldern die Schriftfarbe rot ist, oder das sie alle ein- und ausgeblendet werden. Dann brauchst Du die Classe, damit Du an alle zusammen rann kommst.

Die Verwendung von ID's im css ist sehr selten: Irgendwann fällt Dir ein, das das was Du dort gestyled hast, auch für etwas anderes gut sein könnte, und dann musst Du es eh über die Klasse machen.
jppv007 
Beitragsersteller
 26.06.2014, 10:58

Ich habe schon oft mehreren Objekten die gleiche ID zugewiesen und es hat trotzdem funktioniert. Ich habe schonmal gelesen, dass das so ist, wie du mir es erklärt hast (also ID nur einmal und Class mehrmals). Das hat mich gewundert, weil es auch funktioniert, mehreren Objekten die gleiche ID zuzuweisen. Darum die Frage. Weißt du, warum es bei mir anders ist? Oder habe ich da was falsch verstanden?

knaake10  26.06.2014, 11:04
@jppv007

Ganz einfach: Du benutzt zum testen Browser die damit tolerant umgehen. Tolerante Browser sind was wunderbares, eigenen sich aber leider nicht so gut zu testen..

jppv007 
Beitragsersteller
 26.06.2014, 11:22
@knaake10

Achso. Ich nutze Firefox - der ist anscheinend tollerant. aber gut das ich jetzt weiß wieso das funktioniert. übrigens danke für deine ausführliche Antwort. Sobald das freigeschaltet ist, bekommst du nen Stern ;)

knaake10  26.06.2014, 11:44
@jppv007

Wenn wir uns schon unterhalten: Nimm auf jeden Fall noch folgende Browser zu testen mit ins Boot:

  • Chrome (Verbreitung)
  • IE 10 (Verbreitung)
  • Safari (Smartphone,Tablets)

Damit hättest Du schon eine Menge potentieller User abgedeckt. Und installiere Firebug!

EineFrageexe959  26.07.2024, 19:29

Also sind Id Attribute überflüssig, oder?
Dory1
27.06.2014, 22:02

Noch eine wichtige Unterscheidung. IDs haben eine höhere Spezifität als Klassen - der Selektor erhält also eine höhere Gewichtung als bei Verwendung einer Klasse:

css

#rot { 
    background: red 
}
.blau { 
    background: blue 
}

html

<div class="blau" id="rot">
    Ich bin rot
</div>
Zertik
17.04.2021, 11:23

Eine Id kannst du einem Namen einmal zuordnen bei einer Class geht das mehrmals

<div id="Name">...</div>
<div class="Hallo">...</div>
<div class="Hallo">...</div>
Woher ich das weiß:Hobby
irgendwat
04.04.2018, 18:39

Du kannst IDs zwar mehrfach vergeben, man sollte sie aber nur ein mal vergeben.

Klassen dagegen kannst du mehrfach vergeben.

Ein Objekt kann also eine ID und mehrere Klassen haben. Eine Klasse kann wiederum mehreren, verschiedenen Objekten zugewiesen werden.

Theoretisch funktioniert die CSS-Stylung zwar auch, wenn du eine ID mehrfach vergibst, aber: Möchtest du, dass dein HTML den W3C-Validationskriterien entspricht und somit gut für Crawler/Bots/generell "Maschinen" lesbar ist, solltest du dich daran halten. Auch, wenn du z.B. die Microdata-Auszeichnung benutzen willst, ist es ratsam, sich an die HTML-Standards zu halten.

Hoffe, ich konnte helfen :)
Zertik  17.04.2021, 11:19

Genau
yazanalfarra
27.11.2021, 15:50

Für class brauchst du vor dem Objekt ein Punkt.

Für ID brauchst du vor dem Objekt ein#.