Unterschied class und id

[Frank]

Hallo Forum,
ich verstehe nicht den Unterschied zwischen den Attributen class="" und id="".Ich weiß zwar wie ich die Formate definiere aber nicht wann ich welches verwende soll?

[Der Dicki]

Hallihallo!

Der Unterschied ist der, daß man jede ID nur einmal pro Dokument verwenden darf. Die ID ist ein eindeutiger Identifizierer, so ähnlich wie die Personalausweisnummer (vielleicht ein blödes Beispiel ;) ).
IDs kann man z.B. auch benutzen, um per Javascript auf ein ganz bestimmtes Element zuzugreifen (getElementById...)

Klassen hingegen kann man dafür benutzen, um viele Elemente eines Dokuments gleich aussehen zu lassen. Es dürfen mehrere Elemente der gleichen Klasse in einem Dokument vorkommen.

Ich hoffe, damit konnte ich Dir helfen...

Viele liebe Grüße,
Der Dicki

[Frank]

Hallihallo!

Hallo!

Der Unterschied ist der, daß man jede ID nur einmal pro Dokument verwenden darf.

Das verstehe ich nicht. Ein Beispiel:

#test{font-family:Verdana;font-size:10pt;}
<div ID="test">Test</div>
<div ID="test">Test2</div>

Jetzt verwende ich dieselbe ID doch zweimal im Dokument?

[Der Dicki]

Hallihallo!

OK, da habe ich jetzt Javascript und CSS durcheinandergewirbelt.
Es ist also durchaus erlaubt, ein- und dieselbe id für CSS mehrfach zu verwenden. (Wenn man Javascript benutzt, und auf diese ids zugreifen will, gibt allerdings Probleme).

Ein wichtiger Punkt ist allerdings die Positionierung von Elementen:

Man könnte z.B. mehreren Elementen ganz leich das gleiche Aussehen zuordnen, indem man Klassen benutzt:

.dings {
   font-family: Verdana;
   font-size: 10pt;
}

Dann kann man noch einzelnen id verschiedene Positionen zuteilen:

#test1 {
   position: absolute;
   left: 100px;
   top: 10px;
}
#test2 {
   position: absolute;
   left: 200px;
   top: 50px;
}

Und dann schreiben:
  <div id="test1" class="dings">  Test 1 </div>
  <div id="test2" class="dings">  Test 2 </div>

Es ist also nicht vorgeschrieben, id und class streng voneinander zu trennen, aber durchaus nützlich.

Viele liebe Grüße,
Der Dicki

[Orlando]

Hi Tobias,

Es ist also durchaus erlaubt, ein- und dieselbe id für CSS mehrfach zu verwenden. (Wenn man Javascript benutzt, und auf diese ids zugreifen will, gibt allerdings Probleme).

nein, eine ID ist einmalig im Dokument, sonst wäre es ja keine ID ;)

http://selfhtml.teamone.de/html/attribute/allgemeine.htm#uebersicht
 http://www.w3.org/TR/REC-html40/struct/global.html#adef-id

Daher meckert auch der Vali bei mehrmaliger Verwendung der gleichen ID in einem Dokument: "Error: ID 'bla' already defined"

LG Orlando

[MudGuard]

Hi,

Der Unterschied ist der, daß man jede ID nur einmal pro Dokument verwenden darf.
Das verstehe ich nicht. Ein Beispiel:

#test{font-family:Verdana;font-size:10pt;}
<div ID="test">Test</div>
<div ID="test">Test2</div>

Das ist so nicht erlaubt! Die id-Werte ***müssen*** eindeutig sein.
Daß manche Browser das trotzdem vielleicht so machen, wie Du es willst, ändert nichts an der Tatsache, daß das falsch ist.

Jetzt verwende ich dieselbe ID doch zweimal im Dokument?

Tolles Argument.

Morden ist nicht erlaubt.
Tut es jemand trotzdem, ist das Morden noch immer nicht erlaubt - oder etwa doch?

Andreas

[Der Dicki]

Hallihallo!

Das ist so nicht erlaubt! Die id-Werte ***müssen*** eindeutig sein.
Daß manche Browser das trotzdem vielleicht so machen, wie Du es willst, ändert nichts an der Tatsache, daß das falsch ist.

Lag ich am Anfang also doch richtig... grmblfrx...
Hatte echt daran gezweifelt, weil es wirklich _alle_ meine Browser mitgemacht haben....

Ärgerlich aber auch!

Viele liebe Grüße,
Der Dicki

[verona]

schau mal hier unter selfhtml nach. ID wurde sonst für Anker in der selben HTML-Datei benutzt. Z.B. "unten" "Anfang" usw. Heute nutzt man das, wie Dicki sagt, als Identifier. Mit Class kannst du (nur) formatieren mit ID kannst du identifizieren und formatieren.

[Frank]

schau mal hier unter selfhtml nach. ID wurde sonst für Anker in der selben HTML-Datei benutzt. Z.B. "unten" "Anfang" usw. Heute nutzt man das, wie Dicki sagt, als Identifier. Mit Class kannst du (nur) formatieren mit ID kannst du identifizieren und formatieren.

Hallo verona,
ich bin da wohl blockiert, was das verständnis betrifft.
Was heißt das im klartext formatieren (class)und identifizieren und formatieren (ID).
Ich habe schon in selfhtml geguckt, bringt mich aber auch nicht so richtig weiter.
Kannst du mir da einmal ein konkretes BSp zeigen?
Wäre nett, da ich als Hobbyprogrammierer vieles irgendwie hinkriege aber die Struktur fehlt. Ich möchte mich aber bessern ;)

[Verona]

OK. Ich versuche es mal. Ist aber wirklich nicht schwer. Kennst du Word von Microschrott und deren Formatvorlagen? Kann man fast so sehen. ;-)

<p class="ueberschrift">Ich bin eine überschrift</p>
<p class="fliesstext">blablabla</p>

Ist ein blödes Beispiel, da man bei einer Überschrift wohle eher das <h1-6> nimmt, gelle!

So, aber im head der Datei würdest du jetzt schreiben, was den eigentlich wie formatiert werden soll. Die Überschrift class="ueberschrift" soll 20px groß, rot und in Arial sein. Würg! Der Fliesstext class="fliesstext" soll 3px klein, gelb und Times sein. LOL

So unterscheidest du bei ein und demselben Tag, hier <p>, dennoch in zwei und kannst so z.B. den Text unterschiedlich darstellen, oder formatieren.

Das kannst du aber auch mit ID machen. Nur das ID eben noch mehr kann. Wenn du z.B. eine einzige HTML Datei hast mit mehreren Überschriften, kannst du oben lauter links <a href="...> machen und vor jedem Abschnitt einen ID(Anker) machen. Klickt der Surfer auf den Link oben im Dokument, springt er auf die richtige Stelle weiter unten im Dokument. So kann man innerhalb eines einzigen Dokumentes komfortable verlinken. Ganz einfach, oder?

Natürlich kann man noch viel viel mehr damit machen, aber da fallen mir jetzt keine Beispiel zu ein.

V.

[Frank]

Hi Verona,
habe besten dank für deine Bemühungen, jetzt wird mir das schon klarer!

[Orlando]

Hi Verona,

ID wurde sonst für Anker in der selben HTML-Datei benutzt. Z.B. "unten" "Anfang" usw.

dafür wurde und wird hauptsächlich name="anker" genutzt - erst in XHTML 1.1 [1] wurde 'name' durch 'id' ersetzt, womit dann auch Netscape 4 um diese Funktionalität umfällt...

LG Orlando

[1] http://www.8ung.at/w3c-trans-de/xhtml11/changes.html#a_changes

[Kai Lahmann]

hi

ich verstehe nicht den Unterschied zwischen den Attributen class="" und id="".Ich weiß zwar wie ich die Formate definiere aber nicht wann ich welches verwende soll?

eigentlich haben die beiden nicht viel miteinander zu tun, außer, dass sie *auch* von CSS abgesprochen werden können ohne dafür 'nen Attribut-Selector auspacken zu müssen.

class="bla"
Besagt, dass dieses Element zu der Klasse (oder Gruppe) "bla" gehört. Einziger tiferer Sinn ist, wenn man diese Gruppe über CSS eine Formatierung verpassen will (.bla){}.

id="blubb"
Besagt, das dieses das Element "blubb" ist. Damit ist es Dokumentweit eindeutig zu identifizieren, wie es eben zu einen für CSS Sinn macht (#blubb{}), aber auch wenn man es über JS mit document.getElementById("blubb") ansprechen will oder wenn man  ein Ziel für einen Link haben will.

Grüße aus Bleckede

Kai

[Thomas J.S.]

hallo,

ich verstehe nicht den Unterschied zwischen den Attributen class="" und id="".Ich weiß zwar wie ich die Formate definiere aber nicht wann ich welches verwende soll?

zusätzlich zu den bereist gesagten:
du kannst mit class beliebige elemente ansprechen. d.h. du kannst für ein und die selbe definition gleichzeitig versch. elementen zuweisen:

.myClass { color:red; }

<span class="myClass">
<td class="myClass">
<h1 class="myClass"> usw.

du kannst natürlich auch eine strengere selection vornehmen

h1.myClass { color:red; } gilt nur für <h1 class="myClass"> elemente
div.myClass { color:red; } gilt nur für <div class="myClass"> elemente

id gilt für ein element und für dieses element muss diese id dokumentweit eindeutig sein, also z.B. in einer html seite darf nur einmal <div id="myID"> vorkommen, natürlich darf in einer anderen html seite wieder ein, aber nur ein <div id="myID"> vorkommen.

#myID { color:red; } gilt für alle elemente mit dem ID wert myID
d.h. du kannst also sowas machen:

<h1 id="myID">
<div id="myID">
(was nicht geht ist zwei elemente des selben typs mit dem selben ID wert, also keine zwei divs mit dem gleichen ID)

wenn du jetzt aber
div#myID { color:red; } schreibst, gilt es nur für das elemente <div id="myID"> nicht aber für <h1 id="myID">

du kannst auch class und id kombinieren um weitere ferfeinerung zu erreichen.

generell, du hast mit klassen eine breitere steuerungsmöglichkeit, mit id hast du eine sehr preziese ausgerichtete definitionsmöglichkeit.

grüße
thomas

[Kai Lahmann]

hi

<h1 id="myID">
<div id="myID">

beeeep beeeep! Das ist auch schon nicht erlaubt! Beachte, dass id="" auch ein Sprungziel für Links ist!

Grüße aus Bleckede

kai

[Thomas J.S.]

hallo Kai,

<h1 id="myID">
<div id="myID">

beeeep beeeep! Das ist auch schon nicht erlaubt! Beachte, dass id="" auch ein Sprungziel für Links ist!

stimmt, da war ich ewtwas schleißig mit meiner erklärungen und dachte nicht weiter als css http://www.w3.org/TR/REC-CSS2/selector.html#id-selectors

grüße
thomas