HTML
Klassen en ID's

Invoering

Syntaxis

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

parameters

Opmerkingen

Een element een klasse geven

Klassen zijn identificatiemiddelen voor de elementen waaraan ze zijn toegewezen. Gebruik het class -kenmerk om een klasse aan een element toe te wijzen.

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

Om meerdere klassen aan een element toe te wijzen, scheidt u de klassennamen met spaties.

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

Klassen gebruiken in CSS

Klassen kunnen worden gebruikt voor het stileren van bepaalde elementen zonder alle elementen van dat type te wijzigen. Deze twee span elementen kunnen bijvoorbeeld volledig verschillende stijlen hebben:

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

Klassen met dezelfde naam kunnen aan een willekeurig aantal elementen op een pagina worden gegeven en ze krijgen allemaal de stijl die bij die klasse hoort. Dit zal altijd waar zijn, tenzij u het element binnen de CSS opgeeft.

We hebben bijvoorbeeld twee elementen, beide met het klasse- highlight :

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

Als onze CSS is zoals hieronder, wordt de kleur groen toegepast op de tekst binnen beide elementen:

.highlight { color: green; }

Echter, als we willen alleen doel div 's met de klas highlight dan kunnen we specificiteit toe te voegen zoals hieronder:

div.highlight { color: green; }

Niettemin wordt bij het stylen met CSS over het algemeen aanbevolen om alleen klassen (bijv. .highlight ) te gebruiken in plaats van elementen met klassen (bijv. div.highlight ).

Zoals met elke andere selector, kunnen klassen worden genest:

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

U kunt de klassekiezer ook koppelen om alleen elementen te selecteren die een combinatie van verschillende klassen hebben. Als dit bijvoorbeeld onze HTML is:

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

En we willen dit specifieke stuk tekst roze kleuren, we kunnen het volgende doen in onze CSS:

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

Een element een ID geven

Het ID-kenmerk van een element is een ID die uniek moet zijn in het hele document. Het doel is om het element op unieke wijze te identificeren bij het koppelen (met behulp van een anker), scripting of styling (met CSS).

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

U moet niet twee elementen met dezelfde ID in hetzelfde document hebben, zelfs als de attributen aan twee verschillende soorten elementen zijn gekoppeld. De volgende code is bijvoorbeeld onjuist:

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

Browsers zullen hun best doen om deze code weer te geven, maar onverwacht gedrag kan optreden bij het stylen met CSS of het toevoegen van functionaliteit met JavaScript.

Als u naar elementen op basis van hun ID in CSS wilt verwijzen, geeft u de ID voor met # .

#example-id { color: green; }

Als u naar een element met een ID op een bepaalde pagina wilt gaan, voegt u # met de elementnaam in de URL.

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

Deze functie wordt in de meeste browsers ondersteund en vereist geen extra JavaScript of CSS om te werken.

Problemen met dubbele ID's

Het is moeilijk om problemen op te lossen met meer dan één element met dezelfde ID. De HTML-parser probeert meestal de pagina in elk geval weer te geven. Meestal treedt er geen fout op. Maar het tempo kan eindigen op een slecht gedragen webpagina.

In dit voorbeeld:

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

CSS-selectors werken nog steeds

#aDiv {
    color: red;
}

Maar JavaScript kan beide elementen niet verwerken:

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

In dit geval draagt de html variabele alleen de eerste div inhoud ("a") .

Acceptabele waarden

Voor een 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>

Voor een klas

De regels voor klassen zijn in wezen hetzelfde als voor een id . Het verschil is dat class niet uniek hoeven te zijn in het document.

Verwijzend naar de bovenstaande voorbeelden, hoewel dit niet geldig is in hetzelfde document:

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

Dit is prima:

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

Belangrijke opmerking: hoe ID- en klassenwaarden buiten HTML worden behandeld

Houd er rekening mee dat de bovenstaande regels en voorbeelden van toepassing zijn in de context van HTML.

Het gebruik van cijfers, leestekens of speciale tekens in de waarde van een id of een class kan problemen veroorzaken in andere contexten, zoals CSS, JavaScript en reguliere expressies.

Hoewel de volgende id bijvoorbeeld geldig is in HTML5:

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

... het is ongeldig in CSS:

4.1.3 Tekens en hoofdletters

In CSS kunnen id's (inclusief elementnamen, klassen en ID's in selectors) alleen de tekens [a-zA-Z0-9] en ISO 10646 tekens U + 00A0 en hoger bevatten, plus het koppelteken (-) en het onderstrepingsteken ( _); ze kunnen niet beginnen met een cijfer, twee koppeltekens of een koppelteken gevolgd door een cijfer . _{(nadruk toegevoegd)}

In de meeste gevallen kunt u tekens ontsnappen in contexten met beperkingen of een speciale betekenis.

W3C-referenties

• 3.2.5.1 Het kenmerk id
• 3.2.5.7 De class attribuut
• 6.2 SGML basistypes