I principali selettori CSS che dovresti conoscere

In CSS, i selettori sono usati per selezionare gli elementi HTML delle pagine web che vogliamo modificare. È disponibile un’ampia gamma di selettori CSS che permettono una alta precisione nella selezione degli elementi in base allo stile.

In questo video, prima di tutto, viene fornita una panoramica su come operano i selettori e come li possiamo utilizzare nei fogli di stile.

 

Element selector

Questo selettore è solo una corrispondenza non sensibile alle maiuscole  e minuscole tra il nome del selettore e un dato nome di un elemento HTML. Questo è il modo più semplice per puntare a tutti gli elementi di un dato tipo.

See the Pen Type selectors aka element selectors by Filippo Scorza (@filipposcorza) on CodePen.

Universal *

Questo semplice selettore serve a selezionare in maniera indiscrimintata tutti gli elementi di un documento; viene indicato dal carattere asterisco *

See the Pen Universal Selector by Filippo Scorza (@filipposcorza) on CodePen.

Id #

Gli id consentono di identificare in maniera univoca qualsiasi elemento della pagina. Per sua definizione, è possibile assegnare un id ad un solo elemento senza che possa essere ri-assegnato. L’utilizzo degli id è adatto soprattutto per la realizzazione del layout di pagina: consentono, infatti, di contraddistinguere univocamente le diverse sezioni e di assegnarne lo stile senza problemi di conflitti. Nel CSS gli id sono identificati dal carattere # anteposto al nome.

See the Pen Online – basic selector by Filippo Scorza (@filipposcorza) on CodePen.

Class .

Il selettore class permette di assegnare uno specifico stile in maniera analoga al selettore id permettendo, però, di poter essere replicato ed applicato a più elementi della pagina, anche diversi tra loro. Il selettore di classe consiste in un punto,  seguito da un nome di classe. Un nome di classe è qualsiasi valore, senza spazi, posto all’interno di un attributo di classe HTML.

See the Pen Class selectors by Filippo Scorza (@filipposcorza) on CodePen.

Attribute

I selettori di attributo consentono di selezionare elementi all’interno di una pagina in base ai loro attributi e assegnare così lo stile desiderato. È possibile quindi identificare gli elementi di una pagina senza essere costretti ad assegnare loro una classe o un id.

La loro sintassi generica è costituita da parentesi quadre contenenti un nome di attributo seguito da una condizione facoltativa da associare al valore dell’attributo.

See the Pen Presence and value attribute selectors by Filippo Scorza (@filipposcorza) on CodePen.

Pseudo classi

Una pseudo-classe CSS è una parola chiave, preceduta da due punti, aggiunta alla fine dei selettori per specificare lo stile degli elementi selezionati solo quando si trovano in un certo stato. Ad esempio, si potrebbe voler creare uno stile per un elemento solo quando è vi si posizione sopra dal puntatore del mouse.

See the Pen A pseudo-class example by Filippo Scorza (@filipposcorza) on CodePen.

A questo link puoi trovare l’elenco delle pseudo classi disponibili.

Numeric Values

Ci sono molti tipi di numeric values in CSS da considerare, dai valori numerici ai colori fino alle funzioni che eseguono una certa azione (come l’incorporazione di un’immagine di sfondo o la rotazione di un elemento).

Tra questi troviamo delle sottocategorie:

  • Valori numerici: ovvero alori di lunghezza per specificare, ad esempio, la larghezza di un elemento, lo spessore del bordo o la dimensione del carattere e numeri interi unitari per specificare, ad esempio, la larghezza relativa della linea o il numero di volte in cui eseguire un’animazione.
  • Percentuali: possono essere utilizzati per specificare la dimensione o la lunghezza, ad esempio in relazione alla larghezza o all’altezza di un contenitore padre o alla dimensione del carattere predefinita.
  • Colori: per specificare i colori dello sfondo, del testo, etc.
  • Coordinate di posizioni: per specificare la posizione di un elemento posizionato rispetto alla parte superiore sinistra dello schermo.
  • Funzioni: per specificare, ad esempio, le immagini di sfondo o i relativi gradienti.

See the Pen Length and size by Filippo Scorza (@filipposcorza) on CodePen.

Se hai bisogno di approfondire ulteriormente o avere maggiori specifiche in merito ai selettori CSS, il Mozilla Developer Network è un ottimo punto di riferimento così come W3School; inoltre, se vuoi, puoi scaricare il manuale CSS3 the missing manual (212 download)

 

I principali selettori CSS che dovresti conoscere ultima modifica: 2018-05-14T19:13:59+00:00 da Filippo Scorza
Spread the love
Translate