HTML
Klassen und IDs

Einführung

Syntax

• class = "class1 class2 class3"
• id = "uniqueid"

Parameter

Bemerkungen

Einem Element eine Klasse geben

Klassen sind Bezeichner für die Elemente, denen sie zugeordnet sind. Verwenden Sie das class , um einem Element eine Klasse zuzuweisen.

<div class="example-class"></div>

Um einem Element mehrere Klassen zuzuweisen, trennen Sie die Klassennamen durch Leerzeichen.

<div class="class1 class2"></div>

Klassen in CSS verwenden

Klassen können zum Gestalten bestimmter Elemente verwendet werden, ohne alle Elemente dieser Art zu ändern. Zum Beispiel können diese beiden span eine völlig unterschiedliche Gestaltung haben:

<span></span>
<span class="special"></span>

Klassen mit demselben Namen können einer beliebigen Anzahl von Elementen auf einer Seite zugewiesen werden, und sie erhalten alle das dieser Klasse zugeordnete Format. Dies ist immer wahr, wenn Sie das Element nicht im CSS angeben.

Zum Beispiel haben wir zwei Elemente, die beide mit der Klasse highlight :

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Wenn unser CSS wie folgt ist, wird die Farbe Grün auf den Text in beiden Elementen angewendet:

.highlight { color: green; }

Wenn wir jedoch nur ausrichten möchten div ‚s mit der Klasse highlight dann können wir Spezifität wie unten hinzufügen:

div.highlight { color: green; }

Dennoch , wenn sie mit CSS Styling, wird es in der Regel empfohlen , dass nur Klassen (zB .highlight ) statt mit Klassen (zB Elemente verwendet werden div.highlight ).

Wie bei jedem anderen Selektor können Klassen verschachtelt werden:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

Sie können den Klassenselektor auch so verketten, dass nur Elemente mit einer Kombination aus mehreren Klassen ausgewählt werden. Zum Beispiel, wenn dies unser HTML ist:

<div class="special left menu">This text will be pink</div>

Und wir möchten diesen bestimmten Text rosa färben, wir können in unserem CSS Folgendes tun:

.special.left.menu { color: pink; } 

Einem Element eine ID geben

Das ID-Attribut eines Elements ist eine Kennung, die im gesamten Dokument eindeutig sein muss. Sein Zweck ist die eindeutige Identifizierung des Elements beim Verknüpfen (Verwenden eines Ankers), Skripting oder Styling (mit CSS).

<div id="example-id"></div>

Sie sollten nicht zwei Elemente mit derselben ID in demselben Dokument enthalten, auch wenn die Attribute zwei verschiedenen Arten von Elementen zugeordnet sind. Der folgende Code ist beispielsweise falsch:

<div id="example-id"></div>
<span id="example-id"></span>

Browser geben ihr Bestes, um diesen Code zu rendern. Es kann jedoch zu unerwartetem Verhalten kommen, wenn mit CSS gestylt oder mit JavaScript Funktionalität hinzugefügt wird.

Um Elemente anhand ihrer ID in CSS zu referenzieren, müssen Sie der ID ein # voranstellen.

#example-id { color: green; }

Um zu einem Element mit einer ID auf einer bestimmten Seite zu springen, hängen Sie # mit dem Elementnamen in der URL an.

http://example.com/about#example-id

Diese Funktion wird in den meisten Browsern unterstützt und erfordert kein zusätzliches JavaScript oder CSS.

Probleme im Zusammenhang mit doppelten IDs

Wenn Sie mehr als ein Element mit derselben ID haben, ist das Problem schwer zu beheben. Der HTML-Parser versucht normalerweise, die Seite auf jeden Fall zu rendern. Normalerweise tritt kein Fehler auf. Das Tempo könnte jedoch zu einer fehlerhaften Webseite führen.

In diesem Beispiel:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

CSS-Selektoren funktionieren immer noch

#aDiv {
    color: red;
}

JavaScript kann jedoch nicht beide Elemente verarbeiten:

var html = document.getElementById("aDiv").innerHTML;

In diesem Fall trägt die html Variable nur den ersten div Inhalt ("a") .

Akzeptable Werte

Für eine ID

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

<div id=" "> ... </div>

<div id="results"> ... </div>
<div id="results"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

Für eine Klasse

Die Regeln für Klassen sind im Wesentlichen die gleichen wie für eine id . Der Unterschied besteht darin , dass class brauchen nicht im Dokument eindeutig zu sein.

Verweisen Sie auf die obigen Beispiele, obwohl dies in demselben Dokument nicht gültig ist:

<div id="results"> ... </div>
<div id="results"> ... </div>

Das ist vollkommen in Ordnung:

<div class="results"> ... </div>
<div class="results"> ... </div>

Wichtiger Hinweis: Wie ID- und Klassenwerte außerhalb von HTML behandelt werden

Beachten Sie, dass die obigen Regeln und Beispiele im Kontext von HTML gelten.

Die Verwendung von Zahlen, Satzzeichen oder Sonderzeichen im Wert einer id oder class kann in anderen Kontexten wie CSS, JavaScript und regulären Ausdrücken zu Problemen führen.

Beispielsweise ist die folgende id in HTML5 gültig:

<div id="9lions"> ... </div>

... es ist in CSS ungültig:

4.1.3 Zeichen und Fall

In CSS können Bezeichner (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-zA-Z0-9] und ISO 10646-Zeichen U + 00A0 und höher sowie den Bindestrich (-) und den Unterstrich ( _); Sie können nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich gefolgt von einer Ziffer beginnen . _{(Betonung hinzugefügt)}

In den meisten Fällen können Sie Zeichen in Kontexten, in denen sie Einschränkungen oder eine spezielle Bedeutung haben, maskieren.

W3C-Referenzen

• 3.2.5.1 Das id Attribut
• 3.2.5.7 Das class
• 6.2 SGML-Basistypen