Selettore di classe
Selettore di classe
Selettore di classe è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 1 lezioni in totale.
Perché utilizzare i selettori di classe
Salve,
Siamo arrivati ai selettori di classe, uno degli argomenti più importanti di CSS.
Conosciamo già i selettori di classe, perché finora li abbiamo utilizzati spesso.
In questa lezione consolideremo le nostre conoscenze e ne scopriremo i vantaggi rispetto agli altri selettori.
Sintassi del selettore di classe
Cominciamo.
Utilizziamo il selettore punto (.) per definire un selettore di tipo classe. Di seguito viene mostrato un selettore di classe denominato my-class, al quale è stato assegnato lo stile font-size: 10px.
.my-class {
font-size: 10px;
}
Possiamo anche definire più di uno stile per un selettore di classe.
.my-class {
font-size: 10px;
}
Selettori multipli
Possiamo assegnare più di una classe allo stesso elemento.
Nell'esempio seguente vengono definiti due selettori di classe denominati el1 ed el2.
È possibile aggiungere due o più classi all'attributo class dell'elemento creato con il tag p, separandole con uno spazio.
Nella sezione di anteprima potete vedere che gli stili delle due classi vengono applicati contemporaneamente all'elemento.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Perché dovremmo scegliere il selettore di classe invece del selettore di tag e di ID
Perché dovremmo scegliere il selettore di classe invece del selettore di tag e di ID?
Quando utilizziamo il selettore di tag, possono verificarsi risultati indesiderati perché vengono influenzati tutti gli elementi creati con questo tag. Pertanto, di solito utilizziamo questi tag quando tutti gli elementi devono avere una caratteristica comune.
Ad esempio, se vogliamo che la famiglia di caratteri di ogni elemento sia 'Lato' , definiamo quanto segue.
a{
font-family: Lato,sans-serif
}Perché dovremmo scegliere il selettore di classe invece del selettore di tag e di ID? 2
Potremmo creare una definizione specifica per l'elemento con il selettore di ID.
Tuttavia, poiché tutte le nostre definizioni di stile sono valide per un solo elemento, abbiamo dovuto riscrivere il codice per un altro elemento al quale volevamo applicare le stesse proprietà
Questo perché in un documento HTML può esserci un solo elemento con lo stesso ID.
Specificità CSS
Ora impariamo il concetto di specificità CSS.
Per comprendere meglio l'argomento, creiamo di nuovo un problema e impariamo questo concetto mentre lo risolviamo.
Specificità CSS 2
Nell'esempio seguente,
è stata creata una definizione di stile per il tag p.
È stata creata una definizione di stile con un selettore di classe denominato .first.
Entrambi i selettori hanno selezionato lo stesso elemento nel nostro documento HTML
Entrambi i selettori hanno definito stili per sostituire la stessa proprietà color. In questo caso si verificherà un conflitto.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
Specificità CSS 3
Osservando l'esempio, potremmo pensare che il colore sarà rosso in base a quanto appreso in precedenza.
Questo perché il concetto di cascata ci dice che prevale l'ultima posizione nell'ordine del codice.
Tuttavia, c'è una piccola precisazione. Se hanno la stessa specificità, prevale il codice scritto per ultimo.
Si tratta di una valutazione che mostra l'importanza della specificità del selettore sull'elemento o sugli elementi interessati.
Indipendentemente dalla sua posizione nel codice, il selettore con il livello di specificità più alto verrà valutato dal browser.
Attenzione
Il selettore di classe è una definizione più specifica rispetto al selettore di elemento. Pertanto, il livello di specificità è maggiore.
Specificità dei selettori
Capire quale selettore è più specifico è in realtà molto semplice.
Poiché a un elemento viene assegnato un solo ID e nella pagina web può essercene una sola occorrenza, ci aspettiamo che sia il selettore con la priorità più alta.
I selettori di classe, invece, possono essere valutati come più specifici dei selettori di tag perché selezionano un gruppo più specifico rispetto al tag.
Nell'esempio seguente vedremo che il selettore di ID prevale, selezionando lo stesso elemento con 3 selettori diversi.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Strumento per il calcolo della specificità
È possibile accedere al calcolatore online della specificità da questo link.
Quando la specificità è importante
Quindi devo eseguire questi calcoli ogni volta?
Certamente no. Se scriviamo il codice secondo gli standard, non si verificheranno conflitti.
Quindi non è necessario eseguire continuamente calcoli matematici, ma in caso di problemi queste informazioni potrebbero essere necessarie per risolverli.
Congratulazioni
Congratulazioni. 🥳🥳🥳
Avete completato la lezione Selettore di classe e specificità CSS.
Nella sezione successiva imparerete i tipi di selettore.
Potete fare clic per continuare nella sezione successiva.
Domande Frequenti
La lezione «Selettore di classe» è gratuita?
Sì — il testo completo di «Selettore di classe» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 1 lezioni in totale.
Cosa imparerò in «Selettore di classe»?
Selettore di classe Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Selettore di classe»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.