Qual è la differenza tra un ID e una classe?

Qual è la differenza tra <div class="">e <div id="">quando si tratta di CSS? Va bene usare <div id="">?

Vedo diversi sviluppatori farlo in entrambi i modi e, dato che sono autodidatta, non l'ho mai capito.

idsdeve essere unico dove classpuò essere applicato a molte cose. Nei CSS idsembrano #elementIDe gli classelementi sembrano.someClass

In generale, usa idogni volta che vuoi fare riferimento a un elemento specifico e classquando hai un numero di cose tutte uguali. Per esempio, comuni idelementi sono cose come header, footer, sidebar. Gli classelementi comuni sono cose come highlighto external-link.

È una buona idea leggere a cascata e comprendere la precedenza assegnata a vari selettori: http://www.w3.org/TR/CSS2/cascade.html

La precedenza di base che dovresti capire, tuttavia, è che i idselettori hanno la precedenza sui classselettori. Se avessi questo:

<p id="intro" class="foo">Hello!</p>

e:

#intro { color: red }
.foo { color: blue }

Il testo sarebbe rosso perché il idselettore ha la precedenza sul classselettore.

Forse un'analogia aiuterà a capire la differenza:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Le carte d' identità degli studenti sono distinte. Non ci sono due studenti nel campus avranno la stessa carta d' identità dello studente . Tuttavia, molti studenti possono e condivideranno almeno una lezione tra loro.

Va bene assegnare a più studenti un titolo di classe , ad esempio Biologia. Ma non è mai accettabile mettere più studenti sotto un ID studente .

Quando si danno le regole sul sistema di interfono della scuola, è possibile assegnare le regole a una classe :

"Domani, tutti gli studenti dovranno indossare una maglietta rossa per la lezione di Biologia."

.Biology {
  color: red;
}

Oppure puoi dare regole a uno studente specifico, chiamando il suo ID univoco :

"Domani Jonathan Sampson indosserà una camicia verde."

#JonathanSampson {
  color: green;
}

In questo caso, Jonathan Sampson riceve due comandi: uno come studente nella classe di biologia e l'altro come requisito diretto. Poiché a Jonathan è stato chiesto direttamente, tramite l'attributo id, di indossare una maglietta verde, ignorerà la precedente richiesta di indossare una maglietta rossa.

Vincono i selettori più specifici.

Dove utilizzare un ID rispetto a una classe

La semplice differenza tra i due è che mentre una classe può essere usata ripetutamente su una pagina, un ID deve essere usato solo una volta per pagina. Pertanto, è opportuno utilizzare un ID sull'elemento div che contrassegna il contenuto principale sulla pagina, poiché ci sarà solo una sezione di contenuto principale. Al contrario, è necessario utilizzare una classe per impostare i colori delle righe alternate su una tabella, poiché per definizione verranno utilizzati più di una volta.

Gli ID sono uno strumento incredibilmente potente. Un elemento con un ID può essere il bersaglio di un pezzo di JavaScript che manipola in qualche modo l'elemento o il suo contenuto. L'attributo ID può essere utilizzato come destinazione di un collegamento interno, sostituendo i tag di ancoraggio con attributi di nome. Infine, se rendi chiari e logici i tuoi ID, essi possono fungere da una sorta di "autodocumentazione" all'interno del documento. Ad esempio, non è necessario aggiungere necessariamente un commento prima di un blocco che indica che un blocco di codice conterrà il contenuto principale se il tag di apertura del blocco ha un ID, ad esempio, "principale", "intestazione", "piè di pagina ", eccetera.

Un ID deve essere unico nell'intera pagina.

Una classe può applicarsi a molti elementi.

A volte, è una buona idea usare gli ID.

In una pagina, di solito hai un piè di pagina, un'intestazione ...

Quindi il piè di pagina può essere in un div con un ID

<div id = "footer" class = "...">

e ho ancora una lezione

Una CLASS dovrebbe essere usata per più elementi per i quali desideri lo stesso stile. Un ID dovrebbe essere per un elemento univoco. Vedi questo tutorial .

È necessario fare riferimento agli standard W3C se si desidera essere un conformista rigoroso o se si desidera che le proprie pagine siano convalidate agli standard.

Gli ID sono univoci. Le lezioni non lo sono. Gli elementi possono anche avere più classi. Inoltre, le classi possono essere aggiunte e rimosse in modo dinamico a un elemento.

Ovunque è possibile utilizzare un ID, è possibile utilizzare una classe. Il contrario non è vero.

La convenzione sembra essere quella di utilizzare gli ID per gli elementi di pagina che si trovano su ogni pagina (come "barra di navigazione" o "menu") e le classi per tutto il resto, ma questa è solo una convenzione e troverai un'ampia varianza nell'uso.

Un'altra differenza è che per gli elementi di input del modulo, l' <label>elemento fa riferimento a un campo per ID, quindi è necessario utilizzare gli ID se si intende utilizzare <label>. è una cosa di accessibilità e dovresti davvero usarla.

In passato sono stati preferiti anche gli ID perché sono facilmente accessibili in Javascript (getElementById). Con l'avvento di jQuery e di altri framework Javascript questo non è un problema.

Le classi sono come categorie. Molti elementi HTML possono appartenere a una classe e un elemento HTML può avere più di una classe. Le classi vengono utilizzate per applicare stili o stili generali che possono essere applicati a più elementi HTML.

Gli ID sono identificatori. Sono unici; a nessun altro è permesso avere lo stesso ID. Gli ID vengono utilizzati per applicare stili univoci a un elemento HTML.

Uso ID e classi in questo modo:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

In questo esempio, le sezioni di intestazione e contenuto possono essere definite tramite #header e #content. Ogni sezione del contenuto può essere applicata a uno stile comune tramite #content .section. Solo per i calci, ho aggiunto una classe "speciale" per la sezione centrale. Supponiamo di volere che una sezione particolare abbia uno stile speciale. Questo può essere ottenuto con la classe .special, ma la sezione eredita ancora gli stili comuni da #content .section.

Quando eseguo lo sviluppo di JavaScript o CSS, in genere utilizzo gli ID per accedere / manipolare un elemento HTML molto specifico e utilizzo le classi per accedere / applicare gli stili a una vasta gamma di elementi.

CSS è orientato agli oggetti. ID indica istanza, class dice class.

Quando si applica CSS, applicarlo a una classe e cercare di evitare il più possibile a un ID. L'ID deve essere utilizzato solo in JavaScript per recuperare l'elemento o per qualsiasi associazione di eventi.

Le classi dovrebbero essere utilizzate per applicare i CSS.

A volte è necessario utilizzare le classi per l'associazione di eventi. In questi casi, cerca di evitare le classi utilizzate per l'applicazione dei CSS e piuttosto aggiungi nuove classi che non hanno i CSS corrispondenti. Ciò verrà di aiuto quando è necessario modificare il CSS per qualsiasi classe o cambiare il nome della classe CSS tutti insieme per qualsiasi elemento.

Lo spazio selettore CSS in realtà consente lo stile id condizionale:

h1#my-id {color:red}
p#my-id {color:blue}

renderà come previsto. Perché dovresti farlo? A volte gli ID vengono generati in modo dinamico, ecc. Un ulteriore uso è stato quello di rendere i titoli in modo diverso in base a un'assegnazione ID di alto livello:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Personalmente, preferisco selettori di nomi di classe più lunghi:

body#list-page .title-block > h1 {font-size:56px}

poiché trovo che usare gli ID nidificati per differenziare il trattamento sia un po 'perverso. Sappi solo che quando gli sviluppatori del mondo Sass / SCSS mettono le mani su questo materiale, gli ID nidificati stanno diventando la norma.

Infine, quando si tratta di prestazioni e precedenza dei selettori, l'ID tende a vincere. Questo è un altro argomento.

Qualsiasi elemento può avere una classe o un ID.

Una classe viene utilizzata per fare riferimento a un determinato tipo di display, ad esempio potresti avere una classe css per un div che rappresenta la risposta a questa domanda. Poiché ci saranno molte risposte, più div avrebbero bisogno dello stesso stile e useresti una classe.

Un id si riferisce a un solo elemento, ad esempio la sezione correlata a destra potrebbe avere uno stile specifico per non essere riutilizzato altrove, userebbe un id.

Tecnicamente puoi usare le classi per tutto o dividerle logicamente. Tuttavia, non è possibile riutilizzare gli ID per più elementi.

La classe è per applicare il tuo stile a un gruppo di elementi. Gli stili ID si applicano solo all'elemento con quell'ID (dovrebbe essercene solo uno). Di solito usi le classi, ma se ce n'è una sola puoi usare gli ID (o semplicemente inserire lo stile direttamente nell'elemento).

In id di sviluppo avanzato possiamo fondamentalmente usare JavaScript.

Per scopi ripetibili, le classi sono utili contrariamente agli ID che dovrebbero essere unici.

Di seguito è riportato un esempio che illustra le espressioni sopra:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Ora puoi vedere qui boxe ci box1sono due (2) <div>elementi diversi , ma possiamo applicare le classi boxe bg-color-reda entrambi.

Il concetto è eredità in un linguaggio OOP .

1) div id non è riutilizzabile e deve essere applicato a un solo elemento HTML mentre la classe div può essere aggiunta a più elementi.

2) Un id ha maggiore importanza se entrambi sono applicati allo stesso elemento e hanno stili contrastanti, verranno applicati gli stili dell'id.

3) L'elemento style fa sempre riferimento a una classe div inserendo a. (punto) davanti ai loro nomi mentre si fa riferimento alla classe div id mettendo un # (hash) davanti ai loro nomi.

4) Esempio: -

classe nella <style>dichiarazione -.red-background { background-color: red; }

ID nella <style>dichiarazione - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Qui lo sfondo sarà di colore blu

ide classsono due attributi HTML globali / standard (gli attributi globali di seguito possono essere utilizzati su qualsiasi elemento HTML).

class Specifica uno o più nomi di classe per un elemento (si riferisce a una classe in un foglio di stile)

id Specifica un ID univoco per un elemento

Gli attributi id forniscono un identificatore univoco a livello di documento in cui l'attributo class fornisce un modo per classificare elementi simili.

Il valore dell'attributo id deve essere univoco nella pagina HTML in cui è possibile riutilizzare l'attributo di classe ovunque si desideri applicare le stesse proprietà

La classe viene utilizzata per più elementi che hanno attributi comuni. Ad esempio, se si desidera lo stesso colore e carattere per tag p e body, utilizzare l'attributo di classe o in una divisione stessa.

D'altra parte, Id viene utilizzato per evidenziare gli attributi di un singolo elemento e usato esclusivamente per un particolare elemento. Ad esempio, abbiamo un tag h1 con alcuni attributi che non vorremmo che si ripetessero in nessun altro elemento della pagina.

Va notato che se usiamo sia class che id in un elemento, * id sovrappone gli attributi della classe. * Semplicemente perché id è esclusivamente per un singolo elemento

Fare riferimento all'esempio seguente

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Generiamo l'output

Produzione