Zoeken…


Invoering

Klassen en ID's vergemakkelijken het verwijzen naar HTML-elementen uit scripts en stylesheets. Het klasseattribuut kan op een of meer tags worden gebruikt en wordt door CSS gebruikt voor styling. ID's zijn echter bedoeld om naar een enkel element te verwijzen, wat betekent dat dezelfde ID nooit twee keer mag worden gebruikt. ID's worden meestal gebruikt met JavaScript en interne documentkoppelingen en worden afgeraden in CSS. Dit onderwerp bevat nuttige uitleg en voorbeelden met betrekking tot het juiste gebruik van klasse- en ID-kenmerken in HTML.

Syntaxis

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

parameters

Parameter Details
klasse Geeft de klasse van het element aan (niet uniek)
ID kaart Geeft de ID van het element aan (uniek in dezelfde context)

Opmerkingen

  • Zowel class als id zijn globale kenmerken en kunnen daarom worden toegewezen aan elk HTML-element.
  • Klassennamen moeten beginnen met een letter (AZ of az) en kunnen worden gevolgd door letters, cijfers, koppeltekens en onderstrepingstekens.
  • In HTML5 kunnen de klasse- en id-attributen voor elk element worden gebruikt. In HTML 4.0.1 waren ze niet toegankelijk voor de tags <base> , <head> , <html> , <meta> , <param> , <script> , <style> en <title> .
  • Een element kan een of meer klassen hebben. Klassen worden gescheiden door spaties en kunnen zelf geen spaties bevatten.
  • Een element kan slechts één ID hebben en moet uniek zijn binnen zijn context (bijv. Een webpagina). ID's kunnen ook zelf geen spaties bevatten.

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

5

De enige beperkingen op de waarde van een id zijn:

  1. het moet uniek zijn in het document
  2. het mag geen spaties bevatten
  3. het moet minstens één karakter bevatten

De waarde kan dus alle cijfers zijn, slechts één cijfer, alleen leestekens, inclusief speciale tekens, wat dan ook. Gewoon geen witruimte.

Dus deze zijn geldig:

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

Dit is ongeldig:

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

Dit is ook ongeldig wanneer het in hetzelfde document is opgenomen:

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

Een id waarde moet beginnen met een letter, die vervolgens alleen kan worden gevolgd door:

  • letters (AZ / az)
  • cijfers (0-9)
  • koppeltekens ("-")
  • onderstrepingstekens ("_")
  • dubbele punten (":")
  • punten (".")

Verwijzend naar de eerste groep voorbeelden in de HTML5-sectie hierboven, is er slechts één geldig:

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

Deze zijn ook geldig:

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

Nogmaals, als het niet met een letter (hoofdletters of kleine letters) begint, is het niet geldig.


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



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow