[CSS] Differenza tra classe e id

[miki92]

Buongiorno,
ho questa domanda in mente e cercando su google ho trovato:

Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.

Ma in parole povere che significa?

[dreadnaut]

Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.

più povere di così, e torniamo all'asilo.

id > identificatore unico > un elemento solo
class > identifica una classe > più elementi ne possono fare parte

Quando hai un elemento unico usi l'id (e.g. titolo, footer), quando hai più elementi in una sola pagina usi una classe (e.g. data, sottolineato).

[miki92]

Grazie dreadnaut.

Grazie...serviva pure a me! ;)
Per cui potremmo anche dire che nell'id possiamo mettere le posizioni (width, height) e nelle classi lo "style" (color, background)...no?
Ciao! ^_________^

Grazie...serviva pure a me! ;)
Per cui potremmo anche dire che nell'id possiamo mettere le posizioni (width, height) e nelle classi lo "style" (color, background)...no?
Ciao! ^_________^

No che c'entra puoi farlo in entrambi, l'id serve ad identificare un elemento, le classi possono avere più elementi.

Foglio stile

#head{

}

.sottotitolo{

}

Pagina HTML

<div id="head">
</div>
<div class="sottotitolo"></div>
<span class="sottotitolo"></span>

Ciauu

[dreadnaut]

in entrambi puoi mettere quello che preferisci, non v'è un contenuto suggerito. L'unica regola è quella specificata sopra, basata sul numero di occorrenze dell'oggetto nella pagina.

[miki92]

Scusate mi sta venendo un altro piccolo dubbio, ma se io ho questo codice:

#contenitore{

margin:0 auto;
backgroud-color:#FF0000;
width: 25%:
/* ECC */
} 

E' uguale a:

.contenitore{

margin:0 auto;
backgroud-color:#FF0000;
width: 25%:
/* ECC */
} 

Cioè a parte che uno viene richiamato tramite id= e l'altro tramite class= l'effetto che dovrebbe produrre cambia?

Scusate mi sta venendo un altro piccolo dubbio, ma se io ho questo codice:

#contenitore{

margin:0 auto;
backgroud-color:#FF0000;
width: 25%:
/* ECC */
} 

E' uguale a:

.contenitore{

margin:0 auto;
backgroud-color:#FF0000;
width: 25%:
/* ECC */
} 

Cioè a parte che uno viene richiamato tramite id= e l'altro tramite class= l'effetto che dovrebbe produrre cambia?

id uguale al tuo contenitore.
class uguale a tutto il resto
Comunque il tuo foglio di style è OK .
Mentre il tuo XHTML contiene 8 errori (se ti può essere utile rivedi).
dietenat

[miki92]

id uguale al tuo contenitore.
class uguale a tutto il resto
Comunque il tuo foglio di style è OK .
Mentre il tuo XHTML contiene 8 errori (se ti può essere utile rivedi).
dietenat

Mi dispiace ma non è quello che ho chiesto.

Ciò che volevo dire e che se quel codice viene richiamato tramite classe o tramite id riproduce lo stesso effetto o no?

Cioè io avevo scaricato un template fatto con id= poi ho sostituito tutto (quindi nel css al posto dei # ho messo il .) con class= ma il risultato era differente, quindi chiedevo se class e id dovrebbero avere lo stesso effetto.

Sì, è come hai detto: se dichiari lo stile per un id devi usare #nomeidentificatore, se invece dichiari la classe devi usare .nomeclasse


ciao!

[miki92]

Ok ma la domanda (che forse non sono riuscito ancora ad esprimere bene) è: questi due codici hanno lo stesso "effetto" o la visualizzazione compare diversa?

#cont{
margin:0 auto;
}
////////////////////////////
<div id="cont">TESTO + CONTENUTO DI ALTRI DIV</div> 

.cont{
margin:0 auto;
}
////////////////////////////
<div class="cont">TESTO + CONTENUTO DI ALTRI DIV</div> 

Cioè come ho già detto una volta ho scaricato un template fatto con gli ID poi ho cambiato gli ID in CLASS (e nel css i cancelletto # con i punti .) e la visualizzazione appariva completamente diversa.

[dementialsite]

Teoricamente non dovrebbero esserci differenze, come ti è già stato detto. Ma se l'hai provato...

Posso azzardare un'altra conclusione, che nessuno ha citato: cambiando gli ID in CLASS diventa impossibile utilizzare la funzione JavaScript getElementById('...'). Va invece utilizzato getElementsByClassName('...')[0]: probabilmente il tuo template usava queste funzioni per modificare dinamicamente gli stili, per quello appare "diverso"...

Stammi bene...

[miki92]

Teoricamente non dovrebbero esserci differenze, come ti è già stato detto. Ma se l'hai provato...

Posso azzardare un'altra conclusione, che nessuno ha citato: cambiando gli ID in CLASS diventa impossibile utilizzare la funzione JavaScript getElementById('...'). Va invece utilizzato getElementsByClassName('...')[0]: probabilmente il tuo template usava queste funzioni per modificare dinamicamente gli stili, per quello appare "diverso"...

Stammi bene...

Nono era tutto gestibile tramite CSS/HTML non c'era traccia di JavaScript. Va beh sarà stato un errore del browser in quel momento o chissà che altro...grazie comunque.

[dreadnaut]

se il codice è soltanto quello, l'effetto è identico.

Quando però ci sono più regole che vanno a cambiare gli stessi attributi, usare #qualcosa o .qualcosa cambia e dipende dal valore di specificità.

La specificità è un rigiro strano per cui alcune regole hanno diversa priorità e sovrascrivono, o non sovrascrivono, altre regole che vanno a coprire lo stesso oggetto.

Esempio

P { color: red; }
.verde { color: green; }

di che colore apparirà il testo in

<p class="verde"> Testo test! </p>

Seguendo le regole della pagina che ho linkato sopra, si scopre che il testo appare effettivamente verde, perché una regola TAG { ... } vale 1 punto, mentre una regola .nomeclasse { ... } vale 10 punti, e quindi ha la precedenza. Se ci fosse un #id { ... }, questa regola varrebbe addirittura 100 punti e i valori in essa definiti sarebberò quelli utilizzati.

[miki92]

Wow, io senza vedere la continua avevo detto "rosso"...wow quante cose si imparano sul forum...ti ringrazio dreadnaut!

[dreadnaut]

ah, a parità di specificità, l'ultima regola nel file è quella che viene applicata (immagina che tutte le regole vengano applicate una dopo l'altra, in cascata: l'ultima a scrivere un valore per quell'attributo vince)

[miki92]

Sisi ho letto su quel link da te postato, però la cosa che non capisco e perchè alcuni template o stili CSS hanno una cosa del genere:

#contenitore{ 

margin:0 auto; 
backgroud-color:#FF0000; 
width: 25%: 
/* ECC */ 
}  

.contenitore{ 

margin:0 auto; 
backgroud-color:#FF0000; 
width: 25%: 
/* ECC */ 
} 

Cioè lo stessisimo codice prima in classe e poi in id (o viceversa) per applicare quella regola su un solo div

[zulukwebsite]

Sisi ho letto su quel link da te postato, però la cosa che non capisco e perchè alcuni template o stili CSS hanno una cosa del genere:

#contenitore{ 

margin:0 auto; 
backgroud-color:#FF0000; 
width: 25%: 
/* ECC */ 
}  

.contenitore{ 

margin:0 auto; 
backgroud-color:#FF0000; 
width: 25%: 
/* ECC */ 
} 

Cioè lo stessisimo codice prima in classe e poi in id (o viceversa) per applicare quella regola su un solo div

be ..in teoria dovrebbe essere sbagliato (ma più che sbagliato diciamo nn appropriato) applicare la class all'elemento div contenitore....visto che dovrà (credo) essere applicato una sola volta nella pagina la cosa corretta sarebbe applicare un id all'elemento div...sinceramente non so perchè trovi quello stile ripetuto..... ma tanto se nn è mai usato puoi cancellarlo no?? poi per il resto pensa che è più un discorso teorico che pratico...cioè tu un mestolo lo puoi usare anche per picchiare la gente ma in teoria serve per girare il sugo ;-)