Corso SEO & CSS: #24 Selettori e DOM

« Corso SEO & CSS: #23 Introduzione

• Come rendere più piacevole la grafica di una pagina Web?
• Cosa è un selettore CSS?
• che cos'è il DOM (document object model)?

DOM

Document Object Model

Prima di spiegarti cosa sono i selettori CSS devo fare una premessa: ti devo spiegare che cos'è il DOM (Document Object Model).

Se ti ricordi, in questo articolo "Corso SEO & HTML: #03 Tag Head e Body" ti avevo mostrato come funziona il linguaggio HTML. I Tag HTML sono costituiti da una parola racchiusa tra due parentesi acute (segno di minore < e segno di maggiore > ) che racchiudono un'altra porzione di codice, che può trattarsi di testo o di altri Tag HTML annidati.

Quando il browser legge un file HTML, costruisce nella memoria un oggetto informatico chiamato DOM (Document Object Model).

Dal punto di vista informatico, il DOM è a tutti gli effetti una variabile scritta nella memoria RAM del computer, ma non è una variabile numerica semplice: il DOM è una variabile con struttura ad albero.

Quando un Tag HTML contiene un altro Tag, si dice che quell'elemento della pagina Web (e dunque quell'elemento del DOM) è "padre" dell'elemento che contiene. Naturalmente l'elemento contenuto è chiamato "figlio" dell'elemento che lo contiene!

In inglese "padre" si dice "parent" e "figlio" si dice "child". Nel CSS esiste uno specifico selettore per identificare il primo figlio attraverso la dicitura "first-child" che vedremo in seguito

Esempio di DOM

Vediamo il DOM generato da un HTML 

Il seguente file HTML che abbiamo già visto qualche settimana fa, è un HTML abbastanza probabile:

Quando il browser legge quel file HTML, produce in memoria un oggetto simile ad un albero come questo: 

Il CSS è un linguaggio che ci permette di modificare l'aspetto grafico di ogni elemento che costituisce il DOM e per individuare ogni singolo elemento vengono utilizzati i "selettori CSS".

Questo è un concetto che inizialmente ti sembrerà strano, perché non è affatto intuitivo, ma nel corso delle prossime settimane vedremo degli esempi pratici e tutto ti apparirà molto più semplice.

Selettori CSS

Esistono diversi tipi di selettori, vediamoli insieme:

Selettore universale

Il carattere asterisco (*)  seleziona ogni elemento del DOM

Selettore di tipo

Ogni Tag HTML di "quel tipo" specificato viene selezionato. Per esempio il selettore "p" seleziona ogni paragrafo, il selettore "div" seleziona tutti i blocchi div, etc.

Selettore di classe

Ogni Tag HTML può avere un attributo "class", in tal caso verranno selezionati tutti gli elementi a cui è stata assegnata quella certa classe. Il selettore di classe è preceduto da un punto ".classe".

La medesima classe può essere assegnata a elementi di vario tipo, ad esempio una arbitraria classe ".centered" a cui possiamo assegnare la propriatà di testo centrato, possiamo applicarla a un paragrafo "p", come anche a una porzione di testo "span", così come a una cella di tabella "td".

Selettore di identificatore

Similmente al selettore di classe, ogni Tag HTML può avere un attributo "id".

La sola differenza tra "id" e "class" è che in un DOM non si può assegnare lo stesso ID a più elementi: si dice che l'attributo "id" è univoco.

Il selettore di identificatore è preceduto da un cancelletto "#id-elemento".

Selettore per pseudoclasse

Le pseudoclassi sono particolari attributi assegnati dal browser e sono preceduti da un segno duepunti ":pseudoclasse".

Esempi di pseudoclassi^(*) sono:

• :link
• :visited
• :hover
• :focus
• :active
• :first-child
• :nth-child()
• :last-child
• :empty
• :lang

(*) Consulta sul sito W3C la lista completa di pseudoclassi

Selettore per pseudoelementi ^(**)

Molto simile al concetto di pseudoclasse ma con il doppio segno duepunti, possiamo selezionare anche elementi particolari come la prima lettera di un paragrafo "::first-letter" o la sola prima riga "::first-line", addirittura possiamo creare elementi che non sono presenti nel DOM mediante pseudoelementi "::before" e "::after", per esempio per aggiungere delle virgolette aperte e chiuse per decorare una citazione.

(**) Consulta sul sito W3C la lista completa di pseudoelementi

Selettori annidati

Per specificare al browser che si intendono selezionare solamente elementi che sono contenuti all'interno di altri elementi, è possibile fare un elenco di selettori, separati da uno spazio l'uno dall'altro.

Ad esempio il selettore "header nav li" seleziona gli elementi degli elenchi "LI" che si trovano all'interno di un blocco di navigazione "NAV" che a sua volta si trova all'interno di un blocco "HEADER".

Come vedi, nell'esempio ho appositamente evitato di inserire l'elenco puntato "UL", per farti capire che non è necessario elencare tutta la catena di elementi di discendenza per selezionare un determinato elemento.

Selettori di discendenza

Con questi particolari selettori invece possiamo chiedere al browser di selezionare gli elementi indicati se la discendenza è esattamente quella menzionata.

Il selettore "figlio" si dichiara con un segno di maggiore "padre > figlio". L'elemento selezionato sarà il figlio e non il padre!

Il selettore "fratello" si dichiara con un segno più "fratello-precedente + fratello-successivo", in tal caso verrà selezionato esattamente il fratello-successivo e non altri fratelli seguenti.

Selettore di attributi

Usando le parentesi quadrate si possono specificare gli attributi che deve avere un elemento per poter essere selezionato ed eventualmente anche il valore che un determinato attributo deve avere:

• [att] : verifica se l'attributo è presente nell'elemento
• [att=val] : verifica se l'attributo 'att' ha esattamente il valore 'val'
• [att~=val] : verifica se l'attributo 'att' contiene al suo interno il valore 'val'
• [att|=val] : verifica se l'attributo 'att' inizia per il valore 'val'

Questo selettore è molto comodo per individuare i vari tipi di elemento di immissione dati dei moduli (ad esempio: input[type="text"] per selezionare solo i campi di immissione del testo).

Raggruppare selettori

I selettori possono essere raggruppati per poter conferire le stesse proprietà grafiche o estetiche a più elementi.

Per raggruppare più selettori si usa la virgola.

Esempio: "p, span, div, h1, h2"

Priorità e cascata

È possibile assegnare a un elemento più regole CSS e può capitare che alcune regole — diverse tra loro — si riferiscano agli stessi elementi. Per questo motivo si rende necessario definire il concetto di priorità. 

Maggiore è il numero di selettori elementari che compongono un selettore per discendenza, e maggiore è la priorità di un selettore.

L'elemento che trova in conflitto tra due selettori assume le proprietà del selettore con maggiore priorità o — a parità di priorità — trattiene la proprietà che viene assegnata per ultima (leggendo il file CSS dall'alto verso il basso).

Nel caso in cui una proprietà venga definita "!important", ecco che questa diviene immediatamente prioritaria anche se il selettore è meno prioritario.

Esempio

Dopo tutta questa teoria provo a dipanare alcuni dubbi con un esempio che si riferisce al file HTML di qui sopra:

Nell'esempio vediamo che si desidera un colore del testo nero per il testo dell'intero "BODY" e dimensione 16 pixel.

La seconda dichiarazione si riferisce a tutti gli elementi di tipo "H1" e "H2" (raggruppati con la virgola) ed avendo la stessa priorità del primo selettore "BODY" ne sovrascrive la dimensione del carattere "font-size", ereditando solamente il colore del testo "nero".

La terza dichiarazione, specifica per tutti elenchi puntati "UL" di avere testo di colore "rosso", sovrascrivendo la direttiva del selettore "BODY" di pari livello e aggiunge una proprietà "list-style" che serve a far scomparire i pallini (bullet) dall'elenco puntato.

La quarta dichiarazione aggiunge specificità a tutti i link "A" contenuti in elenchi puntati "UL" appartenenti ai soli blocchi "HEADER", conferendo uno spessore del testo "grassetto" (BOLD) e un colore "verde".

La quinta e ultima dichiarazione non influenza la quarta poiché è meno prioritaria, ma influenza tutti i link "A" contenuti in elenchi puntati "UL" che non appartengono ai blocchi "HEADER", sovrascrivendo il colore in "blu" e specificando uno spessore "normale" anche se non ce ne sarebbe bisogno, solo per mostrare che l'effetto finale è che lo spessore rimane grassetto nel primo elenco e normale per il secondo.

Ecco come appare la pagina HTML finale:

Conclusioni

Hai capito che il linguaggio CSS serve a conferire un aspetto grafico alle tue pagine web. Per selezionare un elemento all'interno della pagina web devi avere ben chiaro il concetto di DOM (Document Object Model) e con un po' di pratica questi concetti ti saranno sempre più chiari.

Nel corso dei prossimi articoli di questo Blog sulla SEO approfondiremo tutti i principali aspetti sul CSS con particolare attenzione a quelli che potenziano la visibilità del tuo sito web e lo portano più facilmente in prima pagina sui motori di ricerca.

Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati!

Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.

Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.

Corso SEO & CSS: #25 Box Model »