So wählen Sie zwischen `class` und `id`

Lesezeit: 4 Minuten

Benutzer-Avatar
Paul

Beim Benutzen divs Wann ist es am besten, a zu verwenden class vs id?

Ist es am besten zu verwenden class, sagen wir, Schriftvariante oder Elemente innerhalb des HTML? Dann benutze id für die Struktur/Container?

Das ist etwas, bei dem ich immer ein wenig unsicher war, jede Hilfe wäre großartig.

  • Diese Frage gilt nicht nur für div-Elemente, sondern für alle Elemente auf einer HTML-Seite.

    – BrewinBomber

    17. September 2008 um 19:04 Uhr

  • Mögliches Duplikat, stackoverflow.com/q/1215618/425313

    – Brad Koch

    2. Mai 2013 um 3:22 Uhr

  • Mögliches Duplikat von Was ist der Unterschied zwischen einer ID und einer Klasse?

    – mflühr

    18. September 2019 um 13:15 Uhr

Verwenden id um Elemente zu identifizieren, die nur einmal auf einer Seite vorkommen. Wenn Sie beispielsweise eine einzelne Navigationsleiste haben, die Sie an einer bestimmten Stelle platzieren, verwenden Sie id="navigation".

Verwenden class um Elemente zu gruppieren, die sich alle auf eine bestimmte Weise verhalten. Wenn Sie beispielsweise möchten, dass Ihr Firmenname im Fließtext fett angezeigt wird, können Sie verwenden <span class="company">.

Das Wichtigste zu verstehen ist, dass IDs eindeutig sein müssen: Auf einer Seite darf nur ein Element mit einer bestimmten ID existieren. Wenn Sie also auf ein bestimmtes Seitenelement verweisen möchten, ist dies oft das Beste, was Sie verwenden können.

Wenn Sie mehrere Elemente haben, die sich irgendwie ähneln, sollten Sie die Klasse elements verwenden, um sie zu identifizieren.

Eine sehr nützliche, überraschend wenig bekannte Tatsache ist, dass Sie tatsächlich mehrere Klassen auf ein einzelnes Element anwenden können, indem Sie Leerzeichen zwischen die Klassennamen einfügen. Wenn Sie also eine Frage gepostet haben, die von dem derzeit angemeldeten Benutzer geschrieben wurde, können Sie sich damit identifizieren

.

  • Besonders hilfreich sind hier die zusätzlichen Informationen zur Verwendung mehrerer Klassen. Schöne Arbeit inklusive.

    – BrewinBomber

    17. September 2008 um 19:01 Uhr

Benutzer-Avatar
Samson

Denken Sie an die Universität.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student ICH WÜRDE Karten sind unterschiedlich. Keine zwei Studenten auf dem Campus haben denselben Studenten ICH WÜRDE Karte. Viele Studenten können und werden jedoch mindestens eine teilen Klasse miteinander.

Es ist in Ordnung, mehrere Schüler unter einem zu platzieren Klasse Titel, Biologie 101. Aber es ist niemals akzeptabel, mehrere Schüler unter einen Schüler zu stellen ICH WÜRDE.

Beim Geben Regeln über die Schulsprechanlage können Sie geben Regeln zu einem Klasse:

“Würde der Biologieunterricht bitte morgen Rothemden tragen?”

.BiologyClass {
  shirt-color:red;
}

Oder Sie können einem bestimmten Schüler Regeln geben, indem Sie ihn einzigartig nennen ICH WÜRDE:

“Würde Jonathan Sampson bitte morgen ein grünes Hemd tragen?”

#JonathanSampson {
  shirt-color:green;
}

  • Diese Regeln wären episch, wenn sie im wirklichen Leben an einer Universität angewendet würden.

    Benutzer142019

    21. Juni 2011 um 4:11 Uhr

Benutzer-Avatar
Oli

IDs müssen eindeutig sein, aber in CSS haben sie auch Vorrang, wenn es darum geht, herauszufinden, welche von zwei widersprüchlichen Anweisungen zu befolgen ist.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

Der Text wäre weiß.

Benutzer-Avatar
David Rutledge

Ein zusätzlicher Vorteil bei der Verwendung einer ID ist die Möglichkeit, sie in einem Anker-Tag zu zielen:

<h2 id="CurrentSale">Product I'm selling</h2>

Ermöglicht es Ihnen, an einer anderen Stelle direkt auf diese Stelle auf der Seite zu verlinken:

<a href="#CurrentSale">the Current Sale</a>

Eine gängige Anwendung dafür wäre, jeder Überschrift in einem Blog eine ID mit Datumsstempel zuzuweisen (z. B. id=”date20080408″), mit der Sie gezielt auf diesen Abschnitt der Blogseite abzielen können.

Es ist auch wichtig, sich daran zu erinnern, dass es strengere Namensregeln für IDs gibt, vor allem, dass sie nicht mit einer Zahl beginnen dürfen. Siehe ähnliche SO-Frage: Was ist ein gültiger Wert für ID-Attribute in HTML

Benutzer-Avatar
Mike Bauer

Klassen sind großartig, wenn Sie ähnliche Stile auf viele verschiedene divs oder Elemente anwenden möchten. ids sind gut, wenn Sie ein bestimmtes Element zur Formatierung oder zum Aktualisieren mit Javascript ansprechen möchten.

Benutzer-Avatar
Mecki

Der HTML-Standard selbst beantwortet Ihre Frage:

Keine zwei Objekte dürfen die gleiche ID haben, aber beliebig viele Objekte können die gleiche Klasse haben.

Wenn Sie also bestimmte CSS-Stilattribute nur auf ein einzelnes DIV anwenden möchten, wäre das eine ID. Wenn Sie möchten, dass bestimmte Stilattribute auf mehrere DIVs angewendet werden, muss dies eine Klasse sein.

Beachten Sie, dass Sie beides mischen können. Sie können zwei DIVs derselben Klasse zuordnen, ihnen aber unterschiedliche IDs zuweisen. Sie können dann den Stil, der beiden gemeinsam ist, auf die Klasse und die für beide spezifischen Dinge auf ihre ID anwenden. Der Browser wendet zuerst den Klassenstil und dann den ID-Stil an, sodass ID-Stile alles überschreiben können, was eine Klasse zuvor festgelegt hat.

1017630cookie-checkSo wählen Sie zwischen `class` und `id`

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy