Foglio informativo e dettagli sui selettori CSS

Foglio informativo sui selettori CSS

Di recente mi sono tuffato nei selettori CSS.

Esistono così tanti selettori CSS con simboli non familiari,>. , * + ~ [] ecc., quindi ero spesso confuso su come funzionano i selettori CSS. Alla fine, li ho raddrizzati nella mia testa e li ho riprogettati come capisco.

* In effetti, avrei voluto organizzarli su una singola pagina in formato A4 per risparmiare carta e salvare la Terra, ma non potevo, perché ci sono così tanti selettori che volevo aggiungere, quindi ho dovuto andare su più di una pagina . Sono tutte e quattro le pagine A4, tranne le copertine.

Stampa questo cheatsheet e incollalo sul muro. Non memorizzarli, fa solo capolino. Spero che questa infografica ti aiuti a trovare rapidamente i selettori CSS adeguati e ti faccia risparmiare tempo.

Cheatsheet dei selettori CSSSelettori CSS gioco di Ryan Yu

Vai a scaricare il cheatsheet dei selettori CSS e goditi il ​​gioco🕹

Nessun problema. È tutto gratis.

Tuffati nel selettore CSS.

Elencherò l'infografica insieme alle definizioni MDN per rendere le cose più facili per te.

Selettore del tipo

Il selettore del tipo CSS corrisponde agli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi del tipo specificato all'interno di un documento. - MDN

Selettore del tipo

Selettore ID

Seleziona un elemento in base al valore dell'attributo id. Dovrebbe esserci un solo elemento con un determinato ID in un documento. - MDN

Selettore ID

Selettore discendente

Qualsiasi elemento corrispondente a B che discende da un elemento corrispondente a A (ovvero un figlio o un figlio di un figlio, ecc.). il combinatore è uno o più spazi o doppio maggiore dei segni. - MDN

Selettore discendente

Combina i selettori discendente e ID

Combina i selettori discendente e ID

Selettore di classe

Il selettore di classe CSS corrisponde agli elementi in base al contenuto del loro attributo di classe. - MDN

Selettore di classe

Combina il selettore di classe

Combina il selettore di classe

Combinatore di virgole

Qualsiasi elemento corrispondente a A e / o B. - MDN

Combinatore di virgole

Il selettore universale

Seleziona tutto!

Il selettore universale

Combina il selettore universale

Combina il selettore universale

Selettore fratello adiacente

Il combinatore di fratelli adiacenti (+) separa due selettori e corrisponde al secondo elemento solo se segue immediatamente il primo elemento ed entrambi sono figli dello stesso elemento padre. - MDN

Selettore fratello adiacente

Selettore generale di pari livello

Il combinatore di fratelli generali (~) separa due selettori e abbina il secondo elemento solo se segue il primo elemento (anche se non necessariamente immediatamente), ed entrambi sono figli dello stesso elemento genitore. - MDN

Selettore generale di fratelli

Selettore figlio

Il combinatore figlio (>) è posizionato tra due selettori CSS. Corrisponde solo agli elementi corrispondenti al secondo selettore che sono i figli degli elementi corrispondenti al primo. - MDN

Selettore figlio

Pseudo-selettore del primo figlio

La pseudo-classe CSS: first-child rappresenta il primo elemento in un gruppo di elementi fratelli. - MDN

Pseudo-selettore del primo figlio

Solo pseudo-selettore figlio

La pseudo-classe CSS: only-child rappresenta un elemento senza fratelli. È lo stesso di: first-child: last-child o: nth-child (1): nth-last-child (1), ma con una specificità inferiore. - MDN

Solo pseudo-selettore figlio

Pseudo-selettore dell'ultimo figlio

La pseudo-classe CSS: last-child rappresenta l'ultimo elemento tra un gruppo di elementi fratelli. - MDN

Pseudo-selettore dell'ultimo figlio

Pseudo-selettore dell'ennesimo figlio

La pseudo-classe CSS: nth-child () combina elementi in base alla loro posizione in un gruppo di fratelli. - MDN

Pseudo-selettore dell'ennesimo figlio

Nth Last Child Selector

La pseudo-classe CSS: nth-last-child () corrisponde agli elementi in base alla loro posizione in un gruppo di fratelli, contando dalla fine. - MDN

Nth Last Child Selector

Primo di Type Selector

La pseudo-classe CSS: first-of-type rappresenta il primo elemento del suo tipo in un gruppo di elementi di pari livello. - MDN

Primo di Type Selector

Nth of Type Selector

La pseudo-classe CSS: nth-of-type () combina elementi di un determinato tipo, in base alla loro posizione in un gruppo di fratelli. - MDN

Nth of Type Selector

Selettore nth-of-type con formula

Selettore nth-of-type
 Nota:
: Nth-of-type (anche)
: Nth-of-type (dispari)
: Nth-of-type (2)
: Nth-of-type (2n)
: Nth-of-type (3n-1)
: Nth-of-type (2n + 2)

Solo del selettore del tipo

La pseudo-classe CSS only-of-type rappresenta un elemento che non ha fratelli dello stesso tipo. - MDN

Solo del selettore del tipo

Selettore ultimo di tipo

La pseudo-classe CSS: last-of-type rappresenta l'ultimo elemento del suo tipo in un gruppo di elementi di pari livello. - MDN

Selettore ultimo di tipo

Selettore vuoto

La pseudo-classe CSS vuota rappresenta qualsiasi elemento che non ha figli. I bambini possono essere nodi di elementi o testo (compresi gli spazi bianchi). Commenti, istruzioni di elaborazione e contenuto CSS non influiscono sul fatto che un elemento sia considerato vuoto. - MDN

Selettore vuoto

Pseudo-classe di negazione

La pseudo-classe CSS: not () rappresenta elementi che non corrispondono a un elenco di selettori. Poiché impedisce la selezione di elementi specifici, è nota come pseudo-classe di negazione. - MDN

Pseudo-classe di negazione

Selettore di attributi

I selettori di attributi sono un tipo speciale di selettore che abbinerà gli elementi in base ai loro attributi e valori di attributo. La loro sintassi generica è composta da parentesi quadre ([]) contenenti un nome di attributo seguito da una condizione facoltativa da confrontare con il valore dell'attributo. I selettori di attributo possono essere divisi in due categorie a seconda del modo in cui corrispondono ai valori di attributo: selettori di attributo di presenza e valore e selettori di attributo di valore di sottostringa. - MDN

Selettore di attributi

Selettore valore attributo

Selettore valore attributo

L'attributo inizia con il selettore

Questo selettore selezionerà tutti gli elementi con l'attributo attr per cui il valore inizia con val. - MDN

L'attributo inizia con il selettore

L'attributo termina con il selettore

Questo selettore selezionerà tutti gli elementi con l'attributo attr per cui il valore termina con val. - MDN

L'attributo termina con il selettore

Selettore jolly attributo

Questo selettore selezionerà tutti gli elementi con l'attributo attr per cui il valore contiene la sottostringa val. (Una sottostringa fa semplicemente parte di una stringa, ad esempio "cat" è una sottostringa nella stringa "bruco".) - MDN

Selettore jolly attributo

Complimenti, hai completato

articoli

🕹 CodePen

Domande o commenti

Mi piacerebbe sentire il tuo feedback su come posso renderlo migliore per te. Si prega di lasciare i vostri commenti qui sotto o tramite il mio Twitter.

Grazie mille a Ryan Yu per avermi aiutato a creare un selettore CSS. Ryan Yu è l'autore di dove ho imparato molte interessanti tecniche front-end.

Happy codici oggi