8 selettori CSS da utilizzare per migliorare la qualità del codice sul frontend

Nel vasto universo dello sviluppo web, la maestria dei selettori CSS può fare la differenza nella creazione di codice frontend di alta qualità. Oltre ai selettori più comuni come quelli di tipo, classe e ID, esistono anche selettori meno conosciuti ma altrettanto potenti che possono migliorare notevolmente la manutenibilità e la flessibilità del tuo codice. Scopriamo otto di questi selettori meno noti che meritano la tua attenzione.

1. Selettore Attributo con Match Substring

Questo selettore consente di selezionare gli elementi che contengono un attributo con un valore che contiene una sottostringa specifica. Ad esempio, per selezionare tutti gli elementi <input> con un attributo “type” che contiene la parola “text”:

css">input[type*="text"] {
  /* Stili per gli input con attributo "type" contenente "text" */
}

2. Selettore Attributo con Match Prefisso

Questo selettore seleziona gli elementi che hanno un attributo con un valore che inizia con una specifica sottostringa. Ad esempio, per selezionare tutti gli elementi <img> con un attributo “src” che inizia con “https”:

css">img[src^="https"] {
  /* Stili per le immagini con attributo "src" che inizia con "https" */
}

3. Selettore Attributo con Match Suffisso

Questo selettore seleziona gli elementi che hanno un attributo con un valore che termina con una specifica sottostringa. Ad esempio, per selezionare tutti gli elementi <a> con un attributo “href” che termina con “.pdf”:

css">a[href$=".pdf"] {
  /* Stili per i link con attributo "href" che termina con ".pdf" */
}

4. Selettore di Figlio Adiacente

Questo selettore seleziona un elemento che è immediatamente preceduto da un altro elemento specificato. Ad esempio, per selezionare tutti gli elementi <p> che sono seguiti da un elemento <div>:

css">p + div {
  /* Stili per il div che segue direttamente un paragrafo */
}

5. Selettore di Pseudoclasse “not”

Questo selettore permette di selezionare gli elementi che non corrispondono a un determinato selettore. Ad esempio, per selezionare tutti gli elementi <input> che non hanno la classe “input-hidden”:

css">input:not(.input-hidden) {
  /* Stili per gli input che non hanno la classe .input-hidden */
}

6. Selettore di Pseudoclasse “empty”

Questo selettore seleziona gli elementi che non contengono figli, testo o spazi vuoti. Ad esempio, per selezionare tutti gli elementi <div> vuoti:

css">div:empty {
  /* Stili per i div vuoti */
}

7. Selettore di Pseudoelemento “::placeholder”

Questo selettore permette di stilizzare il placeholder di un elemento di input. Ad esempio, per stilizzare il placeholder di un input testuale:

css">input::placeholder {
  /* Stili per il placeholder di un input */
}

8. Selettore di Pseudoelemento “::first-line”

Questo selettore permette di stilizzare la prima linea di un blocco di testo. Ad esempio, per stilizzare la prima linea di un paragrafo:

css">p::first-line {
  /* Stili per la prima linea di un paragrafo */
}

Con l’uso creativo di questi selettori meno noti, puoi migliorare la flessibilità e la precisione dei tuoi stili CSS, rendendo il tuo codice frontend più robusto e manutenibile. Esplora queste opzioni per scoprire nuovi modi per gestire gli elementi HTML e migliorare l’esperienza utente complessiva del tuo sito web