Quali selettori CSS conosci?

• Selettore universale (*) - seleziona tutti gli elementi.
• Selettore di tipo (elemento) - seleziona elementi di un tipo specifico.
• Selettore di classe (.classe) - seleziona elementi con una classe specifica.
• Selettore di identificatore (#id) - seleziona un elemento con un identificatore specifico.
• Selettore di attributo ([attributo], [attributo="valore"], [attributo~="valore"], [attributo|="valore"], [attributo^="valore"], [attributo$="valore"], [attributo*="valore"]) - seleziona elementi in base alla presenza o al valore dell’attributo.
• Pseudo-classi (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(selettore)) - selezionano elementi in uno stato o posizione specifici.
• Pseudo-elementi (::before, ::after, ::first-line, ::first-letter, ::selection) - selezionano parti di un elemento.
• Combinatori:
  • Selettore discendente (selettore selettore) - seleziona gli elementi discendenti del primo selettore.
  • Selettore di figlio diretto (selettore > selettore) - seleziona i figli diretti del primo selettore.
  • Selettore fratello adiacente (selettore + selettore) - seleziona l’elemento che è fratello immediato (successivo) del primo selettore.
  • Selettore fratello generale (selettore ~ selettore) - seleziona tutti gli elementi che sono fratelli (successivi) del primo selettore.

Esempi:

/* Selettore universale */
* {
  margin: 0;
  padding: 0;
}

/* Selettore di tipo */
p {
  line-height: 1.5;
}

/* Selettore di classe */
.highlight {
  color: yellow;
}

/* Selettore di identificatore */
#main-header {
  font-size: 2em;
}

/* Selettore di attributo */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-classe */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-elemento */

p::first-letter {
  font-weight: bold;
}

/* Combinatori */
div p {
  margin-bottom: 10px; /* Paragrafi all’interno di un div */
}
ul > li {
  list-style: none; /* Figli diretti di li all’interno di ul */
}
h2 + p {
  margin-top: 5px; /* Paragrafo che segue immediatamente h2 */
}
h3 ~ p {
  color: gray; /* Tutti i paragrafi dopo h3 */
}