HTML
Klasser och ID

Introduktion

Syntax

• klass = "klass1 klass2 klass3"
• id = "UNIQUEID"

parametrar

Anmärkningar

Ge ett element en klass

Klasser är identifierare för elementen som de tilldelas. Använd class attribut för att tilldela en klass till ett element.

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

För att tilldela flera klasser till ett element, separera klassnamnen med mellanslag.

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

Med hjälp av klasser i CSS

Klasser kan användas för att utforma vissa element utan att ändra alla element av den typen. Till exempel kan dessa två span ha helt olika stylings:

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

Klasser med samma namn kan ges till valfritt antal element på en sida och de kommer alla att få den styling som är associerad med den klassen. Detta kommer alltid att vara sant om du inte anger elementet i CSS.

Vi har till exempel två element, båda med klassens highlight :

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

Om vår CSS är som nedan, kommer den gröna färgen att tillämpas på texten i båda elementen:

.highlight { color: green; }

Men om vi bara vill rikta in sig på div med highlight kan vi lägga till specificitet som nedan:

div.highlight { color: green; }

I stil med CSS rekommenderas det dock att endast klasser (t.ex. .highlight ) används snarare än element med klasser (t.ex. div.highlight ).

Som med alla andra väljare kan klasser kapslas:

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

Du kan också kedja klassväljaren för att bara välja element som har en kombination av flera klasser. Om det till exempel är vår HTML:

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

Och vi vill färga den här texten rosa, vi kan göra följande i vår CSS:

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

Ge ett element ett ID

ID-attributet för ett element är en identifierare som måste vara unik i hela dokumentet. Syftet är att identifiera elementet på ett unikt sätt när du länkar (använder ett ankare), skript eller styling (med CSS).

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

Du bör inte ha två element med samma ID i samma dokument, även om attributen är kopplade till två olika slags element. Till exempel är följande kod fel:

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

Webbläsare kommer att göra sitt bästa för att återge den här koden, men oväntat beteende kan uppstå när du stylar med CSS eller lägger till funktionalitet med JavaScript.

För att hänvisa till element med deras ID i CSS, prefix ID med # .

#example-id { color: green; }

För att hoppa till ett element med ett ID på en given sida ska du lägga till # med elementnamnet i URL: n.

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

Denna funktion stöds i de flesta webbläsare och kräver inte ytterligare JavaScript eller CSS för att fungera.

Problem relaterade till duplicerade ID: er

Att ha mer än ett element med samma ID är ett svårt att felsöka problemet. HTML-parsern försöker vanligtvis göra sidan i alla fall. Vanligtvis inträffar inget fel. Men takten kan hamna på en felaktig beteende-webbsida.

I detta exempel:

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

CSS-väljare fungerar fortfarande

#aDiv {
    color: red;
}

Men JavaScript kan inte hantera båda elementen:

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

I detta fall bär html variabeln bara det första div innehållet ("a") .

Godtagbara värden

För ett 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 en klass

Reglerna för klasser är i princip samma som för ett id . Skillnaden är att class inte värden behöver inte vara unikt i dokumentet.

Med hänvisning till exemplen ovan, även om detta inte är giltigt i samma dokument:

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

Det här är helt okej:

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

Viktig anmärkning: Hur ID- och klassvärden behandlas utanför HTML

Tänk på att reglerna och exemplen ovan gäller inom ramen för HTML.

Att använda siffror, skiljetecken eller specialtecken i värdet på en id eller en class kan orsaka problem i andra sammanhang, t.ex. CSS, JavaScript och vanliga uttryck.

Till exempel, även om följande id är giltigt i HTML5:

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

... det är ogiltigt i CSS:

4.1.3 Tecken och fall

I CSS kan identifierare (inklusive elementnamn, klasser och ID: er i väljare) endast innehålla tecknen [a-zA-Z0-9] och ISO 10646-tecken U + 00A0 och högre, plus bindestreck (-) och understrecket ( _); de kan inte börja med en siffra, två bindestreck eller bindestreck följt av en siffra . _{(betoning tillagd)}

I de flesta fall kan du komma undan karaktärer i sammanhang där de har begränsningar eller speciell betydelse.

W3C-referenser

• 3.2.5.1 id attributet
• 3.2.5.7 Den class attributet
• 6.2 SGML-grundtyper