div> p + div [id * = 'header'] - Se hai visto questo caos confuso di selettori nel CSS di qualcuno, potresti decifrarlo?
Se no, allora ti consigliamo di leggere questo primer su selettori CSS funky che dovresti sapere!
Un'educazione difettosa
Come molti ragazzi autodidatti della CSS, la mia educazione è stata messa insieme da un milione di fonti diverse. Ho letto articoli, ho seguito le esercitazioni e ho sperimentato fino a farmi male la testa per arrivare a un punto in cui avrei potuto sbrogliare un layout complesso e ottenere lo stile che voglio senza troppi problemi.
Tuttavia, col passare del tempo ho iniziato lentamente a rendermi conto che mi mancava una corretta comprensione di uno degli elementi più basilari ed essenziali per lavorare con i CSS: i selettori. Certo, sapevo come scegliere una classe, un ID o un link, ma spesso vedevo frammenti di codice con selettori che mi sembravano completamente estranei.
Dopo aver scritto queste confuse pratiche di codifica per così tanto tempo, ho deciso di sedermi e conoscere i selettori CSS. Non solo ha cambiato il mio modo di codificare, mi ha drasticamente aiutato a interpretare e imparare dai CSS che altri scrivono.
Non sono certo il primo a scrivere sui selettori CSS e questo articolo non aggiungerà assolutamente nulla di rivoluzionario alla discussione. Ma se sei come me, un programmatore autodidatta con un'educazione screziata, questo potrebbe essere solo l'articolo che chiarisce alcune delle tue più grandi confusioni quando fissi meravigliato il codice criptico degli altri.
Incontra la famiglia
Prima di apprendere su selettori CSS complessi. Hai bisogno di capire alcune cose sulla gerarchia HTML. Hai sentito parlare di questi termini prima, ma è tempo di pensarci davvero e assicurarsi di capire come funzionano.
Il modo in cui spieghiamo e facciamo riferimento alla struttura di un documento HTML è usando la metafora di un albero genealogico. Ci sono genitori, figli, fratelli, discendenti e antenati. Per vedere cosa significa ciascuno, usiamo il semplice codice qui sotto.
Il nostro div contiene due elementi di paragrafo e un'ancora. Tutti di questi sono i discendenti del div, che occupa la posizione della radice in questo caso. Un bambino è un discendente diretto di un genitore. Quindi nell'esempio sopra, entrambi i paragrafi sono figli del div ma l'ancora non lo è. Invece, è un figlio del secondo paragrafo.
Allo stesso modo, se torniamo all'albero, il div ha una relazione diversa con gli oggetti. Il div è il genitore dei tag di paragrafo ma un antenato del tag di ancoraggio.
La relazione finale è quella dei fratelli, noti anche come fratelli adiacenti. Proprio come nella tua famiglia, i fratelli condividono un genitore. Quindi nell'esempio sopra, i due paragrafi sono fratelli perché il genitore di entrambi gli elementi è il div. L'ancora non ha fratelli perché è l'unico figlio del paragrafo.
Capito?
La metafora della famiglia può diventare davvero confusa, ma solo se la pensi troppo. La terminologia è abbastanza intuitiva e se pensi al significato letterale della parola, puoi praticamente indovinare cosa significa in termini HTML.
Nel caso in cui abbia ancora bisogno di ulteriori chiarimenti, riscriviamo l'esempio precedente con il contenuto che spiega la gerarchia di ciascun elemento.
The Child Selector
Ora che capiamo come funziona l'HTML, possiamo iniziare la nostra discussione sui selettori CSS, che sfruttano questo sistema. Armati della nostra conoscenza di cosa sia veramente un bambino HTML, possiamo guardare il selettore di bambini CSS.
Il selettore figlio è rappresentato dal simbolo più grande di:?> Var13 -> ?. Lo hai già visto in CSS, ma potresti capire o capire come funziona.
Questa affermazione prende i tag di paragrafo che sono figli del div e li trasforma in blu. Si noti che funziona solo per il bambini di quel div, non necessariamente tutti i discendenti. Esploriamo ulteriormente con il seguente esempio.
Diciamo per qualche orribile motivo che volevamo cambiare il colore del link in giallo. Ovviamente, potremmo scegliere come target il collegamento in vari modi, ma stiamo cercando di conoscere il selettore di bambini, quindi seguitemi. Vediamo cosa succede se implementiamo questo CSS:
Whoops, questo non ha cambiato nulla! Questo perché il collegamento non è figlio del div, è un figlio del paragrafo. Quindi, se cambiamo quel codice per indirizzare qualunque ancore che siano figli di paragrafi, raggiungiamo il nostro obiettivo.
Ordine
Ora che capisci come funziona il selettore di bambini, tieni presente che, come con tutti i CSS, l'ordine fa una grande differenza. Per illustrare questo, iniziamo con questa struttura HTML di base:
Ora consideriamo i seguenti due snippet CSS. Sembrano simili, ma sono molto diversi!
Il primo frammento, rende tutti i paragrafi rossi, quindi cambia solo i figli del div root in blu.
Il secondo frammento fa il contrario, inizialmente punta ai paragrafi secondari del primo div e li trasforma in blu ma poi cambia tutti dei paragrafi in rosso. Questo ovviamente comporta tre paragrafi rossi.
Il secondo esempio rompe una regola importante nei CSS: vai da generale a specifico, non viceversa.Da quando abbiamo iniziato con uno specifico settaggio del selettore che ha come target solo due paragrafi e poi spostato su un selettore generale che ha come target tutti i paragrafi, il secondo ha completamente annullato il primo!
chaining
Se vuoi davvero impazzire, puoi mettere insieme i selettori figli. Nell'esempio seguente, ho prima scelto come target i paragrafi secondari del div esempio3 e li ho modificati in blu, quindi ho scelto come target tutti i paragrafi che erano figli di div che erano anche figli di un altro div e cambiato quelli in rosso.
Il selettore di fratelli adiacenti
Con i selettori di bambini tutto al quadrato, dobbiamo imparare come indirizzare i fratelli. Il selettore fratello adiacente è rappresentato dal simbolo più:? + ?. Con esso, possiamo indirizzare qualsiasi elemento che sia fratello di qualsiasi altro elemento. Ecco un esempio:
Nel nostro CSS, abbiamo utilizzato il selettore fratello adiacente, che ha modificato il secondo e il terzo paragrafo in rosso. Questo è molto difficile, vero? istintivamente, ci aspetteremmo che anche il primo paragrafo sia rosso. Dopo tutto, il primo paragrafo è sullo stesso livello dell'albero dei prossimi due e ha fratelli. Tuttavia, questo selettore si applica solo agli elementi che sono preceduti da qualcos'altro. In questo caso, verranno presi in considerazione solo i paragrafi preceduti direttamente da un paragrafo di pari livello. Il primo paragrafo nell'elenco è preceduto dal div, quindi non viene modificato.
Con questo in mente, il seguente codice cambierebbe lo sfondo del div nidificato in grigio perché è effettivamente preceduto da un paragrafo.
Ulteriori concatenamento
Proprio come con i selettori di bambini, puoi mettere in catena selettori di pari livello adiacenti. Il sistema funziona esattamente come prima. Puoi anche combinare i due per un ulteriore livello di complicazione. Ecco dove il nostro CSS inizia davvero a sembrare strano.
In questo esempio, abbiamo mirato a paragrafi che erano figli di div che erano anche preceduti direttamente da un altro paragrafo.
L'onnipotente asterisco
L'ultimo pezzo di CSS confuso che voglio esaminare è il peggiore ancora: l'asterisco. Sapevi che, a seconda del contesto, l'asterisco può riferire due cose completamente diverse?
Selettore universale
Il primo esempio di un asterisco in CSS è quello con cui probabilmente sei più familiare: il selettore universale. Fedele al suo nome, questo selettore si rivolge a qualsiasi elemento della pagina. Solitamente lo vediamo usato nei ripristini CSS. Quanto segue ripristina il padding e il margine su ogni elemento.
Puoi fare questo e ottenere risultati davvero interessanti. Ad esempio, i seguenti turni ogni elemento all'interno di un div rosso, questo include elementi come i collegamenti che hanno un colore predefinito impostato su qualcos'altro e che non sarebbero interessati semplicemente prendendo di mira il div.
Inoltre, questo snippet indirizza i paragrafi di nipote al div, ma non i paragrafi secondari diretti.
Puoi prenderlo quanto vuoi, i seguenti bersagli sono i pronipoti del div. Puoi vedere questo metodo di concatenamento usato frequentemente nei trucchi per il debug dei CSS.
Selettore del valore di attributo della sottostringa arbitraria
Ora con CSS3, l'asterisco può anche essere usato per implementare il selettore di valori di attributo di sottostringa arbitrario, puoi estrarre quel titolo quando parli con altri sviluppatori se stai cercando di apparire intelligente.
Il seguente codice punta a qualsiasi div con la parola? Section? nel titolo. Può essere? Section3? o? sezione-Quattro ?, non importa, purché contenga la stringa indicata, si applicano gli stili successivi.
Questo codice si applica a tutti i div in questo HTML:
Selettori di attributi
L'ultima palla curva che ti ho lanciato era un esempio di un selettore di attributi. Nei CSS3, i selettori di attributo sono così complicati da meritare il loro stesso articolo! Fortunatamente per voi, abbiamo un pezzo su questo argomento.
Selettori degli attributi CSS: come e perché dovresti utilizzarli
Se sei un nerd come me, questo è un argomento davvero affascinante. È incredibile vedere tutti gli strumenti di selezione che hai a disposizione.
Selettori di classe pseudo
Questo è ancora un altro argomento di selezione con cui dovresti familiarizzare e ancora una volta merita davvero un'attenta analisi dell'argomento. Come per tutti gli argomenti CSS conosciuti dall'uomo, CSS-Tricks ti ha coperto.
Incontra i selezionatori di pseudo classe
Conclusione
Con i CSS, c'è quasi sempre più di un modo per indirizzare qualcosa. In realtà, ci sono spesso una mezza dozzina di modi. Per uno qualsiasi degli esempi sopra riportati, puoi probabilmente indicare un modo più rapido per scegliere quello che stavamo girando, ma man mano che familiarizzi con il DOM, questi selettori iniziano davvero a tornare utili.
Anche se non ti trovi mai nel bisogno di loro, è di vitale importanza capirli perché tu volontà vedi i progetti su cui collabori, i framework che scarichi, le esercitazioni che leggi e ogni altro posto che trovi regolarmente codice. Comprendere le relazioni tra elementi HTML e i relativi selettori CSS può solo renderti un programmatore migliore!