Usiamo i selettori ogni volta che usiamo i CSS. Ma nonostante questo, i selettori CSS sono una delle parti più trascurate delle specifiche.
Parliamo delle grandi trasformazioni nei CSS3 ma troppo spesso dimentichiamo le basi. Il buon uso dei selettori rende la codifica giornaliera più semplice ed elegante. Oggi parlerò dei 10 selezionatori che spesso ci fanno perdere la testa, ma sono entrambi efficaci e molto utili.
Il selettore * potrebbe essere quello che ricordi più facilmente, ma è spesso sottoutilizzato. Quello che fa è di disegnare tutto sulla pagina ed è ottimo per creare un reset e anche per creare alcune impostazioni di pagina come la famiglia di font e la dimensione che desideri avere.
* {margin: 0;padding: 0;font-family: helvetica, arial, sans-serif;font-size: 16px;}Questo selettore è chiamato selettore adiacente e ciò che fa è selezionare l'elemento che è immediatamente dopo il primo elemento. Se volessi selezionare il primo div dopo il nostro header dovresti digitare:
header + div {margin-top: 50px;}Questo selettore seleziona solo i bambini diretti, diversamente da AB, che selezionerà qualsiasi livello secondario di A. Questo selettore è consigliato per quando si lavora con figli di primo livello di un elemento genitore. Ad esempio se si desidera selezionare gli elementi dell'elenco di primo livello in un elenco non ordinato che assomiglia a questo:
- List Item With ul
- Sub list item
- Sub list item
- Sub list item
- List Item
- List Item
Dovresti usare questo selettore perché il solito selettore AB selezionerà anche gli elementi della lista all'interno della lista non ordinata annidata
ul > li {background: black;color: white;}Questo è un ottimo selettore per quando si vuole plasmare un particolare link in un modo diverso, qualunque cosa sia racchiusa tra virgolette verrà confrontata con href del link. Ad esempio per stilare tutti i link a Facebook con il colore blu che useresti:
a[href*="facebook"] {color: blue;}Esiste anche una versione senza * che corrisponde all'URL esatto che è possibile utilizzare per i collegamenti esatti.
Questo selettore è particolarmente utile a causa della sua clausola di negazione che consente di selezionare qualsiasi gruppo di elementi che non corrispondono a ciò che si inserisce in B. Se si desidera selezionare ogni div tranne il piè di pagina che è necessario:
div:not(.footer) {margin-bottom: 40px;}Il primo figlio e l'ultimo figlio ci permettono di selezionare il primo e l'ultimo figlio dell'elemento genitore. Questo può essere di grande aiuto quando si tratta di elencare elementi e rimuovere il margine destro o i bordi. Per rimuovere il bordo nella prima voce dell'elenco e il margine nell'ultima voce dell'elenco è necessario:
ul li:first-child {border: none;}ul li:last-child {margin-right: 0px;}L'ennesimo bambino è un modo semplice per selezionare qualsiasi figlio di un elemento dal suo ordine. Se ad esempio si desiderava la terza voce dell'elenco in una lista non ordinata, questa sarebbe la strada da percorrere:
ul li:nth-child(3) {background: #ccc;}Possiamo usare nth-child per selezionare ogni moltiplicatore di un numero usando la variabile n, ad esempio se mettiamo 3n selezionerebbe la voce numero 3, 6, 9, 12 e così via.
L'ennesimo figlio funziona come l'ennesima figlia, ma invece di contare forma il primo elemento della lista inizia a contare dall'ultimo, quindi se lo usi con il numero due selezionerà l'elemento dell'elenco che viene prima dell'ultimo e il suo utilizzo è proprio come il selettore nth-child:
ul li:nth-last-child(2) {background: #ccc;}Questo selettore fa esattamente quello che pensi che faccia; vede il tipo di elemento che hai inserito e seleziona, ad esempio, il terzo elemento della pagina che corrisponde a ciò che hai digitato. Per selezionare il terzo paragrafo in un div useresti:
div p:nth-of-type(3) {font-style: italic;}Hai mai notato che quando cerchi qualcosa su google le pagine che hai già visto appaiono in un colore diverso? Questo è esattamente ciò che visita fa. Questa è una grande aggiunta per gli utenti, ma a volte è dimenticata e dalla mia esperienza è utile ogni volta che cerco Google.
a:visited {color: blue;}Nella mia esperienza di utilizzo di questi tipi di selettori durante la codifica ci può risparmiare un sacco di tempo ed evitare anche la necessità di un sacco di ID che ingombrano il nostro markup. E questo è solo l'inizio dei selettori CSS, ci sono molti più selettori che sono davvero utili ma a volte dimenticati.
Usi i selettori CSS nei tuoi fogli di stile? È più facile ricorrere a ID e classi? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine del codice via Shutterstock.