I selettori CSS
Selettori CSS
I selettori CSS consentono di identificare e applicare stili a elementi HTML specifici. Sono la base del linguaggio CSS e permettono di definire regole precise per la presentazione dei contenuti. Esistono molti tipi di selettori: di tipo, di classe, di ID, combinatori, di attributo, pseudo-classi e pseudo-elementi.
Approfondimenti
- Selettori di base: come
element,.classe,#idpermettono di selezionare elementi HTML semplici e specifici. - Combinatori: selettori che combinano più selettori per indicare relazioni tra elementi, come discendenza (
space), figlio diretto (>), fratello adiacente (+) e fratello generale (~). - Selettori di attributo: permettono di selezionare elementi in base alla presenza o al valore di un attributo, ad esempio
[type="text"]o[href^="https"]. - Pseudo-classi: selezionano elementi in base al loro stato, posizione o interazione, come
:hover,:nth-child()o:checked. - Pseudo-elementi: selezionano parti virtuali di un elemento, come
::beforeo::first-letter, per applicare stili a porzioni specifiche.
La conoscenza approfondita dei selettori CSS consente di scrivere stili più efficaci, riducendo la necessità di markup aggiuntivo e migliorando la manutenzione del codice.
✅ Tabella CSS Selectors
I selettori CSS permettono di "prendere" uno o più elementi HTML e applicare loro delle regole di stile. Esistono selettori semplici (come quelli per tag, classi o ID), combinatori, selettori di attributo e altri più avanzati.
| Selettore | Descrizione | Esempio |
|---|---|---|
* |
Selettore universale: seleziona tutti gli elementi. | * { margin: 0; } |
element |
Seleziona tutti gli elementi con il nome specificato. | p { color: red; } |
.classe |
Seleziona tutti gli elementi con la classe specificata. | .menu { font-size: 18px; } |
#id |
Seleziona l'elemento con l’ID specificato. | #header { background: gray; } |
element1, element2 |
Seleziona più elementi separati da virgola. | h1, h2 { color: blue; } |
element1 element2 |
Seleziona element2 discendente di element1. |
div p { color: green; } |
element1 > element2 |
Seleziona solo figli diretti. | ul > li { list-style: square; } |
element1 + element2 |
Seleziona il primo fratello immediatamente successivo. | h2 + p { margin-top: 0; } |
element1 ~ element2 |
Seleziona tutti i fratelli successivi. | h2 ~ p { color: orange; } |
[attributo] |
Seleziona gli elementi che hanno un certo attributo. | input[type] { border: 1px solid; } |
[attr="valore"] |
Seleziona gli elementi con un attributo e valore esatto. | input[type="text"] { width: 200px; } |
[attr^="inizio"] |
Seleziona se l'attributo inizia con un certo valore. | a[href^="https"] { color: green; } |
[attr$="fine"] |
Seleziona se l'attributo finisce con un certo valore. | img[src$=".png"] { border: 1px solid; } |
[attr*="parte"] |
Seleziona se l'attributo contiene un certo valore. | a[href*="login"] { text-decoration: underline; } |
Esempi pratici
Codice Esempio: CSS Selectors
CODE: CSS
/* Seleziona tutti i paragrafi */p {color: black;
}/* Seleziona gli elementi con classe "menu" */.menu {
background-color: #eee;
}/* Seleziona l’elemento con ID "header" */#header {
font-size: 2rem;
}/* Seleziona tutti i link all’interno di un div */div a {text-decoration: none;
}/* Seleziona i figli diretti di ul */ul > li {
list-style-type: square;
}/* Seleziona input di tipo checkbox selezionati */input[type="checkbox"]:checked {
accent-color: green;
}/* Seleziona il primo elemento figlio di un contenitore */.container :first-child {
margin-top: 0;
}
IP: 216.73.216.108
