Tipi di selettori
Tipi di selettori
Tipi di selettori è 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.
Introduzione
Salve,
In questa lezione approfondiremo le nostre conoscenze di CSS con selettori più complessi.
Definizioni di stile multiple
Possiamo creare più definizioni di stile inserendo i punti e virgola tra uno stile e l'altro.
.first{
color:blue;
font-size:20px;
text-align: center;
}esiste un documento HTML più complesso
Finora abbiamo lavorato con semplici selettori di tag, ID e classi. Tuttavia, in alcuni casi, quando l'interfaccia utente diventa più complessa, dovremo utilizzare selettori più complessi.
Nell'esempio seguente è presente un documento HTML più complesso.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>analizziamo l'esempio
Analizziamo ora il nostro codice.
- È presente un div con l'ID my-area che funge da contenitore all'interno del body della pagina. È l'antenato di tutti gli elementi contenuti in questo div.
- L'elemento p con la classe first è fratello dell'elemento div con la classe second.
- Il terzo elemento è il figlio del secondo elemento e l'elemento my-area può essere considerato l'antenato del terzo elemento.
Attenzione
Può pensare al layout HTML come a un vero e proprio albero genealogico.
È possibile ereditare geneticamente qualcosa dal proprio nonno.
Ma se questa eredità cambia a livello del padre, il gene del padre sarà più dominante e il carattere ereditato dal nonno cambierà.
Combinazioni di selettori
Vediamo ora come creare combinazioni di selettori.
L'istruzione seguente indica che l'elemento con la classe second è un discendente (figlio o nipote) dell'elemento con la classe third.
Se tra le due classi è presente uno spazio, significa che la classe a sinistra cerca un discendente.
.second .third{
color:red;
}Selettore figlio
Nell'esempio seguente,
significa selezionare la classe third, che è figlia della classe second.
Il segno maggiore di indica di selezionare il figlio dell'elemento interessato.
.second > .third{
color:red;
}possiamo combinare un selettore di tag e uno di classe per selezionare un elemento.
Allo stesso tempo, possiamo combinare un selettore di tag e uno di classe per selezionare un elemento.
L'esempio seguente selezionerà gli elementi p con la classe third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Supponiamo di voler selezionare un div con la classe first
Supponiamo di voler selezionare un div con la classe first.
Nell'esempio seguente significa selezionare l'elemento con la classe first, che è figlio dell'elemento div con ID my-area.
Questo aumenta la specificità dell'elemento da selezionare.
div#my-area > .first{
color:red;
}Selezionare tutti
Il simbolo dell'asterisco (*) è importante tra i selettori.
Indica la selezione di tutti gli elementi.
Nell'esempio seguente, il selettore indica che l'elemento con ID my-area deve selezionare tutti i discendenti.
Il punto importante è che non vengono selezionati solo i figli, ma tutti i discendenti.
Se volessimo selezionare solo i figli, dovremmo inserire il segno maggiore di prima dell'asterisco.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Selettore dei fratelli adiacenti
Abbiamo utilizzato il selettore dei discendenti e il selettore dei figli; ora impariamo a conoscere il selettore dei fratelli.
Il selettore dei fratelli utilizza il segno + per selezionare il fratello successivo.
Nel nostro esempio, il colore di sfondo del terzo elemento paragrafo verrà impostato su giallo dal selettore.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Selettore generale dei fratelli
Se vogliamo selezionare non solo il primo fratello successivo, ma tutti i fratelli seguenti, utilizziamo il simbolo tilde (~).
Il simbolo tilde è noto anche come combinatore dei fratelli successivi.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudo-classi e classi CSS
Le espressioni che non sono classi, ma si comportano come classi, vengono chiamate pseudo-classi.
Non definiamo le pseudo-classi per alcun elemento HTML.
Quando il browser interpreta il codice, presume che esistano. Pertanto, possiamo utilizzare le pseudo-classi nei selettori CSS.
La pseudo-classe :hover
Tra le pseudo-classi, :hover è senza dubbio la più conosciuta.
Hover (:hover) è una pseudo-classe che viene definita automaticamente dal browser per l'elemento interessato quando il mouse passa sopra l'elemento.
Le pseudo-classi vengono utilizzate dopo il simbolo dei due punti (:) nell'istruzione del selettore.
La sintassi per utilizzare una pseudo-classe è illustrata di seguito.
selector:pseudo-class {
property: value;
}Applicare stili ai link con :hover
Creiamo ora un link e vediamo come apparirà quando il mouse passerà sopra di esso.
Attenzione: poiché sui dispositivi mobili non esiste un evento hover come sul Web, questo effetto non sarà visibile nelle applicazioni mobili Coddykit.
Nell'esempio seguente osserviamo che, quando passiamo con il mouse sopra il link, il colore del link diventa verde.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Pseudo-classe :first-child
Una delle pseudo-classi più fuorvianti è :first-child.
Di solito, osservando il nome, possiamo dedurre che significhi selezionare il primo figlio di un elemento.
In realtà, questa deduzione non è corretta.
Viene utilizzata per selezionare il primo elemento tra i fratelli dell'elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-classe :last-child
last-child è l'opposto della pseudo-classe first-child. Viene utilizzata per selezionare l'ultimo elemento tra i fratelli dell'elemento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudo-elemento ::before
Se vogliamo aggiungere qualcosa prima di un elemento, utilizziamo il pseudo-selettore ::before.
Nell'esempio seguente abbiamo aggiunto il contenuto 'Hello' prima degli elementi header.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudo-elemento ::after
Il pseudo-elemento :: after, opposto del pseudo-elemento :: before, viene utilizzato per aggiungere nuovo contenuto dopo l'elemento.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Pseudo-classe per gli elenchi
Abbiamo imparato a conoscere le pseudo-classi più utilizzate. Tuttavia, ce ne sono ancora a decine.
Potete consultare l'elenco di tutte le pseudo-classi al link seguente. Potete utilizzare quelle che vi servono quando ne avete bisogno.
Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo imparato i tipi di selettore.
Nella sezione successiva impareremo le proprietà CSS più utilizzate
Domande Frequenti
La lezione «Tipi di selettori» è gratuita?
Sì — il testo completo di «Tipi di selettori» è 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 «Tipi di selettori»?
Tipi di selettori 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 «Tipi di selettori»?
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.