Qual è la differenza fra id e classe nel codice css?

A cosa serve l’id nel codice css?

L’id viene usato nel css come attributo per compilare il docmento; per la sua scrittura all’interno del codice CSS si utilizza il cancelletto assieme alla specifica di Id, quindi si scrive “#” a cui deve seguire senza spazi il nome dell’id, ad esempio se il nostro id fosse la parola “souvlaki” scriveremmo nel codice “#souvlaki” poi spazio, parentesi graffa, l’insieme delle proprietà che vogliamo abbia l’elemento id e infine una riga sotto l’ultima proprietà la chiusura della parentesi graffa.

Codice di esempio di id nel css

<!DOCTYPE html>

<html>

<head>

<style>

#souvlaki {

color: red;

}

</style>

<body>

<p id=”souvlaki”>Mi piace molto mangiare il souvlaki</p>

</body>

</html>

Cos’è la classe nel css?

In breve, la classe nel css è quel discriminatore che permette di sleezionare un elemento singolo specifico attribuendogli un attributo di classe. Per definire la classe all’interno del codice scrivi dopo l’apertura del tag style a capo un punto “.” e subito dopo, senza uso di spazi, il nome della tua classe; segue nella stessa riga una parentesi graffa aperta, nella riga successiva la proprietà o le proprietà che vuoi attribuire nelle successive alla classe ed infine una riga dopo l’ultima proprietà chiudi la parentesi graffa, vai a capo e chiudi il tag style.

Esempio codice classe nel css

Puoi trovare un esempio di codice css comprendente l’uso delle classi in questo articolo, o se preferisci nella seconda parte di questo tutorial sul padding con css.

Qual’è la differenza fra classe e id nel css?

La differenza sta nel fatto che l’id è irripetibile ed unico: una volta dato ad un elemento un id non possiamo darlo anche ad un secondo ma dobbiamo usare un altro nome id per considerarne un’altro.

Questo invece non accade con le classi, che possono essere ripetute più volte, facendo sì che quindi un elemento del codice possa apparire come facente parte di una classe già usata ma che non possa apparire come appartenente ad un id già usato per un altro elemento.

Ho usato due volte lo stesso id nel css

Nonostante sia un errore potrebbe essere comunque letto nel modo “giusto” dal browser un codice css che abbia riportato in sé due volte lo stesso id, anche se possono accadere degli errori; se invece parlassimo di javascript il ripetere di un id nel codice potrebbe portare con maggiore probabilità alla formazione di errori nell’output del codice.

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.