Prima parte della lezione sugli pseudo-selettori CSS
- Introduzione
- :hover
- :active
- :focus
- :nth-child()
- :first-child
- :last-child
- :not()
- :nth-of-type()
- :empty
- :checked
- :target
- :nth-last-child()
- :last-of-type
- Link utili
Introduzione agli pseudo-selettori CSS
Pseudo-selettori CSS sono una potente caratteristica del linguaggio di stile CSS che consente di selezionare elementi in base a criteri specifici, come lo stato, la posizione o altri attributi degli elementi. Questi pseudo-selettori iniziano con due punti (::) o un solo punto (:) a seconda del loro tipo.
In questa lezione, esploreremo alcuni esempi comuni di pseudo-selettori CSS e vedremo come possono essere utilizzati per modificare il comportamento e l’aspetto degli elementi all’interno di una pagina web.
Pseudo-selettori CSS
:hover – Il pseudo-selettore :hover viene utilizzato per selezionare un elemento quando il cursore del mouse è sopra di esso. È comunemente utilizzato per aggiungere effetti di stile interattivi agli elementi. Ad esempio:
.button:hover {
background-color: #ff0000;
color: #ffffff;
}
Questo codice seleziona un elemento con la classe “button” e cambia il colore di sfondo in rosso e il colore del testo in bianco quando il cursore del mouse è sopra di esso.
:active – Il pseudo-selettore :active viene utilizzato per selezionare un elemento durante il suo stato di attivazione. Questo stato si verifica quando l’utente preme e tiene premuto un elemento. Ad esempio:
.button:active {
background-color: #0000ff;
color: #ffffff;
}
Questo codice seleziona un elemento con la classe “button” e cambia il colore di sfondo in blu e il colore del testo in bianco quando viene premuto.
:focus – Il pseudo-selettore :focus viene utilizzato per selezionare un elemento quando ottiene il focus, ad esempio quando viene selezionato tramite tastiera o tramite un dispositivo di input. Questo pseudo-selettore è spesso utilizzato per aggiungere stili agli elementi di input come campi di testo e caselle di controllo. Ad esempio:
input:focus {
border: 2px solid #ff00ff;
}
Questo codice seleziona un elemento di input e aggiunge un bordo rosa quando viene selezionato.
:nth-child() – Il pseudo-selettore :nth-child() seleziona elementi figli in base alla loro posizione all’interno del loro genitore. È possibile specificare un’espressione per selezionare determinati figli in base al loro indice o a un pattern specifico. Ad esempio:
ul li:nth-child(odd) {
background-color: #f1f1f1;
}
ul li:nth-child(even) {
background-color: #ffffff;
}
Questo codice seleziona gli elementi “li” all’interno di una lista non ordinata “ul” e alterna i colori di sfondo tra grigio chiaro e bianco.
:first-child – Il pseudo-selettore :first-child viene utilizzato per selezionare il primo elemento figlio di un genitore. Può essere utile per applicare uno stile specifico al primo elemento in un elenco o in un gruppo di elementi. Ad esempio:
ul li:first-child {
font-weight: bold;
}
Questo codice seleziona il primo elemento “li” all’interno di una lista non ordinata “ul” e applica uno stile in grassetto.
:last-child – Il pseudo-selettore :last-child viene utilizzato per selezionare l’ultimo elemento figlio di un genitore. Può essere utilizzato per applicare uno stile specifico all’ultimo elemento in un elenco o in un gruppo di elementi. Ad esempio:
ul li:last-child {
margin-bottom: 0;
}
Questo codice seleziona l’ultimo elemento “li” all’interno di una lista non ordinata “ul” e rimuove il margine inferiore.
:not() – Il pseudo-selettore :not() viene utilizzato per selezionare gli elementi che non corrispondono a un determinato selettore. Può essere utilizzato per escludere specifici elementi dalla selezione. Ad esempio:
ul li:not(.special) {
color: #333333;
}
Questo codice seleziona tutti gli elementi “li” all’interno di una lista non ordinata “ul” che non hanno la classe “special” e imposta il colore del testo su grigio scuro.
:nth-of-type() – Il pseudo-selettore :nth-of-type() seleziona elementi in base alla loro posizione all’interno del loro genitore, considerando solo il tipo specificato. Può essere utilizzato per selezionare elementi specifici in base alla loro posizione e al loro tipo. Ad esempio:
div p:nth-of-type(2) {
font-style: italic;
}
Questo codice seleziona il secondo elemento “p” all’interno di un elemento “div” e imposta lo stile del testo in corsivo.
:empty – Il pseudo-selettore :empty viene utilizzato per selezionare gli elementi che non contengono nessun altro elemento o testo all’interno di essi. Può essere utile per applicare stili o nascondere elementi vuoti. Ad esempio:
p:empty {
display: none;
}
Questo codice seleziona tutti gli elementi “p” che sono vuoti e li nasconde impostando la proprietà “display” su “none”.
:checked – Il pseudo-selettore :checked viene utilizzato per selezionare gli elementi di input che sono selezionati o attivati, come le caselle di controllo o i pulsanti di opzione. Può essere utilizzato per applicare stili o modificare il comportamento degli elementi selezionati. Ad esempio:
input[type="checkbox"]:checked {
background-color: #00ff00;
}
Questo codice seleziona gli elementi di input di tipo “checkbox” che sono selezionati e cambia il colore di sfondo in verde.
:target – Il pseudo-selettore :target viene utilizzato per selezionare l’elemento targetato da un’ancora o un collegamento interno nella pagina. Può essere utilizzato per applicare stili all’elemento specificato nell’URL della pagina. Ad esempio:
#section1:target {
background-color: yellow;
}
Questo codice seleziona l’elemento con l’id “section1” che è l’obiettivo di un collegamento interno e imposta il colore di sfondo su giallo.
:nth-last-child() – Il pseudo-selettore :nth-last-child() seleziona gli elementi figli in base alla loro posizione all’interno del loro genitore, contando all’indietro dall’ultimo elemento. Può essere utilizzato per selezionare elementi specifici in base alla loro posizione inversa. Ad esempio:
ul li:nth-last-child(2) {
font-weight: bold;
}
Questo codice seleziona il secondo elemento “li” dalla fine all’interno di una lista non ordinata “ul” e applica uno stile in grassetto.
:first-of-type – Il pseudo-selettore :first-of-type viene utilizzato per selezionare il primo elemento di un determinato tipo all’interno del suo genitore. Può essere utile quando si desidera applicare uno stile specifico al primo elemento di un certo tipo all’interno di un contenitore. Ad esempio:
div p:first-of-type {
color: blue;
}
Questo codice seleziona il primo elemento “p” all’interno di un elemento “div” e imposta il colore del testo su blu.
:last-of-type – Il pseudo-selettore :last-of-type viene utilizzato per selezionare l’ultimo elemento di un determinato tipo all’interno del suo genitore. Può essere utilizzato per applicare uno stile specifico all’ultimo elemento di un certo tipo all’interno di un contenitore. Ad esempio:
ul li:last-of-type {
border-bottom: 1px solid #ccc;
}
Questo codice seleziona l’ultimo elemento “li” all’interno di una lista non ordinata “ul” e aggiunge un bordo inferiore sottile.
