Che cos'è un selettore CSS?

Degui Adil/Getty Images

CSS si basa sulle regole di corrispondenza dei modelli per determinare quale stile si applica a quale elemento nel documento. Questi modelli sono chiamati selettori e vanno dai nomi dei tag (ad esempio,

|_+_| per abbinare i tag di paragrafo) a schemi molto complicati che corrispondono a parti molto specifiche di un documento. Ad esempio, |_+_| corrisponderebbe a qualsiasi |_+_| tag con una classe di |_+_| questo è un figlio del paragrafo con l'id |_+_|Un selettore CSS è la parte di una chiamata di stile CSS che identifica quale parte della pagina web dovrebbe avere lo stile. Il selettore contiene una o più proprietà che definiscono la modalità di selezione HTML

I selettori CSS

Esistono diversi tipi di selettori:

• selettori di tipo: corrispondenti a un elemento specifico
• selettori di classe: abbinamento di elementi con una classe specifica
• Selettori ID: abbinamento dell'elemento con un ID specifico
• selettori discendenti – elementi corrispondenti che sono discendenti di un elemento specifico
• selettori figlio: elementi corrispondenti che sono figli dell'elemento specifico
• selettori universali – abbinabili a qualsiasi elemento
• selettori fratelli adiacenti: elementi corrispondenti immediatamente preceduti da un elemento specifico
• selettori di attributi: elementi di corrispondenza con un attributo o un valore di attributo specifico
• selettori di pseudo-classi: abbinamento di elementi con una specifica pseudo-classe
• selettori di pseudo-elementi: abbinamento di elementi con proprietà di pseudo-elementi specifiche

Formatta stili CSS e selettori CSS

Il formato di a Stile CSS Somiglia a questo:

|_+_|

Separa più selettori che hanno lo stesso stile con virgole. Questo è chiamato raggruppamento del selettore. Per esempio:

|_+_|

Selettori di raggruppamento è un meccanismo abbreviato per mantenere compatti i tuoi stili CSS. Il raggruppamento di cui sopra avrebbe lo stesso effetto di:

|_+_|

Testa sempre i tuoi selettori CSS

Non tutti i browser meno recenti supportano tutti i selettori CSS. Se stai configurando CSS per l'uso con browser vecchi come IE8 o precedenti, assicurati di testare i tuoi selettori in tutti i browser su tutti i sistemi operativi che ritieni possano essere utilizzati per accedere al tuo codice. Se stai usando CSS1, CSS2 o selettori CSS3 da utilizzare con i browser attuali, dovresti andare bene.