HTML
Classi e ID

introduzione

Sintassi

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

Parametri

Osservazioni

Dando un elemento a una classe

Le classi sono identificatori per gli elementi a cui sono assegnati. Usa l'attributo class per assegnare una classe a un elemento.

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

Per assegnare più classi a un elemento, separa i nomi di classe con spazi.

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

Usando le classi in CSS

Le classi possono essere utilizzate per lo styling di determinati elementi senza modificare tutti gli elementi di quel tipo. Ad esempio, questi due elementi span possono avere uno stile completamente diverso:

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

Le classi con lo stesso nome possono essere assegnate a qualsiasi numero di elementi in una pagina e riceveranno tutti lo stile associato a quella classe. Questo sarà sempre vero a meno che non si specifichi l'elemento all'interno del CSS.

Ad esempio, abbiamo due elementi, entrambi con l' highlight della classe:

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

Se il nostro CSS è come sotto, allora il colore verde verrà applicato al testo all'interno di entrambi gli elementi:

.highlight { color: green; }

Tuttavia, se vogliamo solo targetizzare div con la classe highlight , possiamo aggiungere specificità come di seguito:

div.highlight { color: green; }

Tuttavia, quando si .highlight styling con CSS, è generalmente consigliabile utilizzare solo classi (ad es. .highlight ) piuttosto che elementi con classi (es. div.highlight ).

Come con qualsiasi altro selettore, le classi possono essere annidate:

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

Puoi anche concatenare il selettore di classe per selezionare solo elementi che hanno una combinazione di più classi. Ad esempio, se questo è il nostro HTML:

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

E vogliamo colorare questo specifico pezzo di testo rosa, possiamo fare quanto segue nel nostro CSS:

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

Dando un elemento un ID

L'attributo ID di un elemento è un identificatore che deve essere univoco nell'intero documento. Il suo scopo è quello di identificare univocamente l'elemento durante il collegamento (usando un'ancora), lo scripting o lo styling (con CSS).

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

Non dovresti avere due elementi con lo stesso ID nello stesso documento, anche se gli attributi sono collegati a due diversi tipi di elementi. Ad esempio, il seguente codice non è corretto:

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

I browser faranno del loro meglio per rendere questo codice, ma potrebbe verificarsi un comportamento imprevisto durante lo styling con CSS o l'aggiunta di funzionalità con JavaScript.

Per fare riferimento agli elementi in base al loro ID in CSS, anteporre l'ID a # .

#example-id { color: green; }

Per passare a un elemento con un ID su una determinata pagina, aggiungere # con il nome dell'elemento nell'URL.

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

Questa funzione è supportata nella maggior parte dei browser e non richiede JavaScript o CSS aggiuntivi per funzionare.

Problemi relativi agli ID duplicati

Avere più di un elemento con lo stesso ID è un problema difficile da risolvere. Il parser HTML di solito proverà a renderizzare la pagina in ogni caso. Di solito non si verifica alcun errore. Ma il ritmo potrebbe finire in una pagina web scorretta.

In questo esempio:

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

I selettori CSS funzionano ancora

#aDiv {
    color: red;
}

Ma JavaScript non riesce a gestire entrambi gli elementi:

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

In questo caso, la variabile html porta solo il primo contenuto div ("a") .

Valori accettabili

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

Per una classe

Le regole per le classi sono essenzialmente le stesse di un id . La differenza è che class valori delle class non devono essere univoci nel documento.

Riferendosi agli esempi sopra, anche se questo non è valido nello stesso documento:

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

Questo è perfettamente a posto:

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

Nota importante: il modo in cui i valori ID e Classe vengono trattati al di fuori dell'HTML

Tieni presente che le regole e gli esempi sopra riportati si applicano nel contesto dell'HTML.

L'utilizzo di numeri, punteggiatura o caratteri speciali nel valore di un id o di una class può causare problemi in altri contesti, come CSS, JavaScript ed espressioni regolari.

Ad esempio, sebbene il seguente id sia valido in HTML5:

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

... non è valido nei CSS:

4.1.3 Personaggi e caso

Nei CSS, gli identificatori (compresi i nomi degli elementi, le classi e gli ID nei selettori) possono contenere solo i caratteri [a-zA-Z0-9] e ISO 10646 caratteri U + 00A0 e superiori, più il trattino (-) e il carattere di sottolineatura ( _); non possono iniziare con una cifra, due trattini o un trattino seguito da una cifra . _{(enfasi aggiunta)}

Nella maggior parte dei casi potresti essere in grado di sfuggire ai personaggi in contesti in cui hanno restrizioni o significato speciale.

Riferimenti W3C

• 3.2.5.1 L'attributo id
• 3.2.5.7 L'attributo della class
• 6.2 Tipi di base SGML