Una secchiata di selettori CSS

Divertiamoci con questo robusto ripasso dei principali selettori CSS, per migliorare il nostro codice.

1. *

* {
 margin: 0;
 padding: 0;
}

Eliminiamo quelli ovvi, per i principianti, prima di passare ai selettori più avanzati.

Il simbolo della stella avrà come target ogni singolo elemento della pagina. Molti sviluppatori useranno questo trucco per azzerare i margini e il riempimento. Anche se questo va sicuramente bene per i test rapidi, ti consiglio di non usarlo mai nel codice di produzione. Aggiunge troppo peso al browser e non è necessario.
L'asterisco * può essere utilizzato anche con i selettori figlio.

#container * {
 border: 1px solid black;
}

Questo avrà come target ogni singolo elemento figlio del div #container. Di nuovo, cerca di non usare molto questa tecnica.

2. #X

#container {
   width: 960px;
   margin: auto;
}

Premetter il simbolo hash a un selettore ci consente di scegliere come target un ID. Questo è facilmente l'utilizzo più comune; tuttavia, sii cauto quando si utilizzano i selettori di ID.

Chiediti: devo assolutamente applicare un ID a questo elemento per sceglierlo come target?
I selettori di ID sono rigidi e non consentono il riutilizzo. Se possibile, prova prima a utilizzare un nome di tag, uno dei nuovi elementi HTML5 o anche una pseudo-classe.

3. .X

.error {
  color: red;
}

Questo è un selettore di classe. La differenza tra ID e classi è che, con quest'ultima, puoi scegliere come target più elementi. Usa le classi quando desideri applicare lo stile a un gruppo di elementi. In alternativa, usa gli ID ​​per trovare un ago in un pagliaio e applica lo stile solo a quell'elemento specifico.

4. X

a { color: red; }
ul { margin-left: 0; }

E se volessi scegliere come target tutti gli elementi di una pagina, in base al loro tipo, anziché un ID o un nome di classe? Mantienilo semplice e usa un selettore di tipo. Se devi scegliere come target tutti gli elenchi non ordinati, usa ul {}.

5. X Y

li a {
  text-decoration: none;
}

Il successivo selettore più comune è il selettore discendente. Lo usi quando devi essere più specifico con i tuoi selettori. Ad esempio, cosa succede se, invece di indirizzare tutti i tag di ancoraggio, è necessario scegliere come target solo gli ancoraggi che si trovano all'interno di un elenco non ordinato? In questo caso si usa un selettore discendente.

Suggerimento: se il tuo selettore ha l'aspetto di X Y Z A B, errore, stai sbagliando. Chiediti sempre se è assolutamente necessario applicare tutto quel peso.

6. X + Y

ul + p {
   color: red;
}

Questo è indicato come un selettore adiacente. Selezionerà solo l'elemento immediatamente preceduto dall'elemento precedente. In questo caso, solo il primo paragrafo dopo ogni ul avrà il testo in rosso.

7. X > Y

div#container > ul {
  border: 1px solid black;
}

La differenza tra lo standard X Y e X> Y è che quest'ultimo selezionerà solo i figli diretti. Ad esempio, considera il seguente markup:

   <div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
   </div>

Un selettore di #container > ul sceglierà come target solo gli ul che sono figli diretti del div con un id di container. Non mirerà, ad esempio, all'ul che è figlio del primo li.

Per questo motivo, ci sono vantaggi in termini di prestazioni nell'utilizzo del combinatore figlio. In effetti, è consigliato in particolare quando si lavora con motori di selezione CSS basati su JavaScript.

8. X ~ Y

ul ~ p {
   color: red;
}

Questo combinatore fratello è simile a X + Y, ma è meno rigoroso. Mentre un selettore adiacente (ul + p) selezionerà solo il primo elemento immediatamente preceduto dal precedente selettore, questo è più generalizzato. Selezionerà, facendo riferimento al nostro esempio sopra, qualsiasi elemento p, purché segua un ul.

9. X[title]

a[title] {
   color: green;
}

Indicato come selettore di attributi, nel nostro esempio sopra, questo selezionerà solo i tag di ancoraggio che hanno un attributo title. I tag di ancoraggio che non ricevono questo stile particolare. Ma cosa succede se hai bisogno di essere più specifico? Guarda il prossimo esempio!

10. X[href="foo"]

a[href="https://code.tutsplus.com"] {
  color: #red; 
}

Lo snippet di cui sopra modellerà tutti i tag di ancoraggio che collegano a https://code.tutsplus.com; riceveranno il colore rosso. Tutti gli altri tag di ancoraggio rimarranno inalterati.

Nota che stiamo racchiudendo il valore tra virgolette. Ricorda di farlo anche quando utilizzi un motore di selezione CSS JavaScript.
Funziona bene, anche se è un po' rigido. E se il collegamento si dirige effettivamente a Envato Tuts +, ma forse il percorso è code.tutsplus.com anziché l'URL completo? In questi casi, possiamo usare un po' della sintassi delle espressioni regolari.

11. X[href*="foo"]

a[href*="tutsplus"] {
  color: #83b348; /* Envato green */
}

Ecco, questo è ciò di cui abbiamo bisogno. L'asterisco indica che il valore che procede deve apparire da qualche parte nel valore dell'attributo. In questo modo, questo copre tutsplus.com, code.tutsplus.com e persino webdesign.tutsplus.com.

Tieni presente che questa è un'affermazione ampia. E se l'anchor tag fosse collegato a un sito non Envato con la stringa tutsplus nell'URL? Quando è necessario essere più specifici, utilizzare ^ e $ per fare riferimento rispettivamente all'inizio e alla fine di una stringa.

12. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Ti sei mai chiesto come fanno alcuni siti web a mostrare una piccola icona accanto ai link esterni? Sono sicuro che li hai già visti prima; sono simpatici promemoria che il collegamento ti indirizzerà a un sito web completamente diverso.

Questo è un gioco da ragazzi con il simbolo del carato. È più comunemente usato nelle espressioni regolari per designare l'inizio di una stringa. Se vogliamo scegliere come target tutti i tag di ancoraggio che hanno un href che inizia con http, potremmo usare un selettore simile allo snippet mostrato sopra.

Notare che non stiamo cercando https: //; non è necessario e non tiene conto degli URL che iniziano con https: //.
Ora, cosa succederebbe se invece volessimo modellare tutti gli ancoraggi che si collegano, ad esempio, a una foto? In questi casi, cerchiamo la fine della stringa.

13. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

Ancora una volta, usiamo un simbolo di espressioni regolari, $, per fare riferimento alla fine di una stringa. In questo caso, stiamo cercando tutti gli ancoraggi che collegano a un'immagine o almeno un URL che termini con .jpg. Tieni presente che questo non acquisirà immagini GIF e PNG.

14. X[data-*="foo"]* 

a[data-filetype="image"] {
   color: red;
}

Come compensiamo tutti i vari tipi di immagine? Bene, potremmo creare più selettori, come ad esempio:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Ma questo è noioso e inefficiente. Un'altra possibile soluzione è utilizzare attributi personalizzati. E se aggiungessimo il nostro attributo data-filetype a ogni ancoraggio che si collega a un'immagine?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Quindi, con quell'aggancio in posizione, possiamo usare un selettore di attributi standard per indirizzare solo quegli ancoraggi.

a[data-filetype="image"] {
   color: red;
}
X[foo~="bar"]
 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Eccone uno speciale che stupirà i tuoi amici. Non molte persone conoscono questo trucco. Il simbolo tilde (~) ci consente di scegliere come target un attributo che ha un elenco di valori separati da spazi.

Seguendo il nostro attributo personalizzato di X[foo~="bar"]
sopra, potremmo creare un attributo di informazioni sui dati, che può ricevere un elenco separato da spazi di tutto ciò di cui dobbiamo prendere nota. In questo caso, prenderemo nota dei collegamenti esterni e dei collegamenti alle immagini, solo per l'esempio.

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Con quel markup in atto, ora possiamo scegliere come target tutti i tag che hanno uno di questi valori, usando il trucco del selettore di attributi ~.

/* Punta gli attributi data-info tche contengono il valore "external" */
a[data-info~="external"] {
   color: red;
}

/* E che contengono il valore "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

Abbastanza elegante, eh?

16. X:visited and X:link

a:link { color: red; }
a:visited { color: purple; }

Usiamo la pseudo-classe :link per indirizzare tutti i tag di ancoraggio su cui non è ancora stato fatto clic.

In alternativa, abbiamo anche la pseudo classe :visited, che, come ci si aspetterebbe, ci consente di applicare uno stile specifico solo agli anchor tag della pagina su cui è stato fatto clic o "visitati".

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

Questa pseudo classe avrà come target solo un elemento dell'interfaccia utente che è stato selezionato, come un pulsante di opzione o una casella di controllo.

18. X:after

Le pseudo classi :before e :after sono fantastiche. Ogni giorno, a quanto pare, le persone trovano modi nuovi e creativi per usarli in modo efficace. Generano semplicemente contenuto attorno all'elemento selezionato.

Molti sono stati introdotti per la prima volta a queste classi quando hanno riscontrato l'hack clear-fix.

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

Questo hack usa la pseudo classe: after per aggiungere uno spazio dopo l'elemento e quindi cancellarlo. È un ottimo trucco da avere nella borsa degli attrezzi, soprattutto nei casi in cui il metodo overflow: hidden; non è possibile.

19. X:hover

div:hover {
  background: #e3e3e3;
}

Oh andiamo. Questo lo sai. Il termine ufficiale per questo è "pseudo classe azione utente". Sembra confuso, ma in realtà non lo è. Vuoi applicare uno stile specifico quando un utente passa il mouse su un elemento? Questo porterà a termine il lavoro!

Utilizzerai più spesso questo selettore quando applichi, ad esempio, un bordo inferiore ai tag di ancoraggio, quando ci passi sopra.

a:hover {
 border-bottom: 1px solid black;
}

Suggerimento pro: border-bottom: 1px solid black; appare meglio di text-decoration: underline;.

20. X:not(selector)

div:not(#container) {
   color: blue;
}

La pseudo classe di negazione è particolarmente utile. Diciamo che voglio selezionare tutti i div, ad eccezione di quello che ha un ID container. Lo snippet sopra gestirà perfettamente questo compito.

Oppure, se volessi selezionare ogni singolo elemento (sconsigliato) ad eccezione dei tag di paragrafo, potremmo fare:

*:not(p) {
  color: green;
}

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Possiamo usare pseudo elementi (designati da ::) per definire lo stile di frammenti di un elemento, come la prima riga o la prima lettera. Tieni presente che questi devono essere applicati agli elementi block per avere effetto.

Scegli come target la prima lettera di un paragrafo

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Questo snippet è un'astrazione che troverà tutti i paragrafi della pagina, quindi come target secondario solo la prima lettera di quell'elemento.
Questo è più spesso utilizzato per creare il capolettera per la prima lettera di un articolo.

Scegli come target la prima riga di un paragrafo

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

Ricordi i giorni in cui non avevamo modo di scegliere come target elementi specifici in uno stack? La pseudo classe nth-child lo risolve!

Si noti che nth-child accetta un numero intero come parametro, ma non è a base zero. Se desideri scegliere come target il secondo elemento della lista, usa li:nth-child(2).

Possiamo anche usarlo per selezionare un insieme variabile di figli. Ad esempio, potremmo fare li:nth-child (4n) per selezionare ogni quarto elemento dell'elenco.

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

E se avessi un enorme elenco di elementi in un ul e avessi solo bisogno di accedere, ad esempio, al terzultimo elemento? Piuttosto che fare li:nth-child(397), potresti invece usare la pseudo classe nth-last-child.

Questa tecnica funziona in modo quasi identico al numero 22 sopra. La differenza è che inizia alla fine della raccolta e torna indietro.

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

Ci saranno momenti in cui, invece di selezionare un figlio, dovrai invece selezionare in base al tipo di elemento.

Immagina un markup che contenga cinque elenchi non ordinati. Se si desidera applicare lo stile solo al terzo ul e non si dispone di un ID univoco a cui agganciarsi, è possibile utilizzare la pseudo classe nth-of-type(n). Nello snippet sopra, solo il terzo ul avrà un bordo attorno ad esso.

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

E sì, per rimanere coerenti, possiamo anche usare l'ennesimo di tipo per iniziare alla fine dell'elenco dei selettori e tornare indietro per individuare l'elemento desiderato.

26. X:first-child

ul li:first-child
border-top: none;
}

Questa pseudo classe strutturale ci consente di scegliere come target solo il primo figlio del genitore dell'elemento. Lo userai spesso per rimuovere i bordi dal primo e dall'ultimo elemento dell'elenco.

Ad esempio, supponiamo di avere un elenco di righe e ognuna ha un bordo in alto e un bordo in basso. Bene, con quella disposizione, il primo e l'ultimo oggetto di quel set sembreranno un po 'strani.

Molti designer applicano classi di primo e ultimo per compensare questo. Invece, puoi usare queste pseudo classi.

27. X:last-child

ul > li:last-child {
   color: green;
}

L'opposto di first-child, last-child sceglierà come target l'ultimo elemento del genitore dell'elemento.

28. X:only-child

div p:only-child {
   color: red;
}

Sinceramente, probabilmente non ti ritroverai a usare troppo spesso la pseudo classe only-child. Tuttavia, è disponibile, se ne hai bisogno.

Ti consente di scegliere come target gli elementi che sono l'unico figlio del suo genitore. Ad esempio, facendo riferimento allo snippet sopra, solo il paragrafo che è l'unico figlio del div sarà colorato in rosso.

Supponiamo che il markup seguente.

<div><p> My paragraph here. </p></div>

<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

In questo caso, i paragrafi del secondo div non verranno scelti come target; solo il primo div. Non appena si applica più di un figlio a un elemento, la pseudo classe figlio unico cessa di avere effetto.

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

Questa pseudo classe strutturale può essere utilizzata in alcuni modi intelligenti. Sceglierà come target elementi che non hanno fratelli all'interno del suo contenitore principale. Ad esempio, scegli come target tutti gli ul che hanno un solo elemento di elenco.

Per prima cosa, chiediti come faresti a svolgere questo compito. Potresti fare ul li, ma questo mirerebbe a tutti gli elementi dell'elenco. L'unica soluzione è usare only-of-type.

ul > li:only-of-type {
   font-weight: bold;
}

30. X:first-of-type

La pseudo classe first-of-type consente di selezionare i primi fratelli del suo tipo.

Un test

Per capire meglio questo, facciamo un test. Copia il markup seguente nel tuo editor di codice:

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

Ora, senza continuare a leggere, prova a capire come targetizzare solo "Voce di elenco 2". Quando l'hai capito (o ti sei arreso), continua a leggere.

Soluzione 1

Esistono diversi modi per risolvere questo test. Ne esamineremo una manciata. Cominciamo usando first-of-type.

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

Questo frammento essenzialmente dice: trova il primo elenco non ordinato nella pagina, quindi trova solo i figli immediati, che sono elementi dell'elenco. Successivamente, filtrali fino al secondo elemento dell'elenco in quel set.

Soluzione 2

Un'altra opzione è utilizzare il selettore adiacente.

p + ul li:last-child {
   font-weight: bold;
}

In questo scenario, troviamo l'ul che viene immediatamente dopo il tag p, quindi troviamo l'ultimo figlio dell'elemento.

Soluzione 3

Facciamo i fighi con questi selettori.

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

Questa volta, prendiamo il primo ul sulla pagina, quindi troviamo il primo elemento dell'elenco, ma partendo dal basso!

Traduzione dell'articolo originale: "The 30 CSS Selectors You Must Memorize" di Jeffrey Way, code.tutsplus.com