08. Selettori avanzati | Batch Data Collector

Continuiamo a scoprire la potenza dei selettori CSS partendo da una porzione di HTML dell’unità precedente:

<html>
<header>
<title>Yearly budget and expenses</title>
</header>
<body>

<div id="firstBlock">
Questa pagina contiene i conteggi aggiornati al <strong>25 settembre 2019</strong> relativi a budget e spese.
<span>Budget totale delle iniziative: <i>12.000.000 Euro</i></span><br/>
<span>Spese totali delle iniziative: <i>6.000.000 Euro</i></span>
</div>

<table id="year2017">
<tr><td>Month</td><td>Relative (Euro)</td><td>Absolute (Euro)</td></tr>
<tr><td>Jan-Feb</td><td>1.000.000</td><td>1.000.000</td></tr>
<tr><td>Mar-Apr</td><td>1.000.000</td><td>2.000.000</td></tr>
<tr><td>May-Jun</td><td>1.000.000</td><td>3.000.000</td></tr>
<tr><td>Jul-Aug</td><td>1.000.000</td><td>4.000.000</td></tr>
<tr><td>Sep-Oct</td><td>1.000.000</td><td>5.000.000</td></tr>
<tr><td>Nov-Dic</td><td>1.000.000</td><td>6.000.000</td></tr>
</table>

<div class="finalcredit">Credito finale: 6.000.000 Euro</div>
<div class="finalcredit">Credito finale: 1.500.000 Euro</div>

</body>

Ed ecco una lista dei selettori più comuni. Gli esempi riferiti al codice sopra saranno identificati in grassetto.

Selettore	Esempio	Descrizione
.class	.finalcredit	Seleziona tutti gli elementi con class=”finalcredit”. Nell’esempio due div.
.class1.class2	<div class=”style1 style2″>	Seleziona gli elementi per i quali siano specificate entrambe le classi style1 e style2.
#id	#year2017	Seleziona gli elementi con id=”year2017″. Nell’esempio si tratta di una table.
element	span	Seleziona tutti gli i tag span della pagina. Nell’esempio sono due e quindi span potrebbe essere un elemento ripetitivo.
element#id	div#firstBlock	Seleziona il tag div con id=”firstBlock”.
element.class	div.finalcredit	Seleziona i tag div con class=”finalcredit”.
element element	div span	Seleziona i tag span contenuti dentro un tag div. Gli span potrebbero essere contenuti a loro volta dentro altri ulteriori elementi e verrebbero comunque selezionati. Dall’esempio cattureremmo i due span dentro div#firstBlock.
element>element	div > span	Seleziona i tag span direttamente contenuti dentro un tag div. In questo modo si specifica che i tag span devono essere figli di primo grado del tag div.
element + element	span+span	Seleziona gli elementi span posti immediatamente dopo un altro span. Attenzione, dopo ma non dentro! Pertanto “body table+table+table ” seleziona la terza tabella figlia del tag body.
element1 ~ element2	i ~ span	Seleziona gli elementi i preceduti da un tag span.
[attribute=value ]	[height=500]	Seleziona tutti gli elementi che specificano un attributo height con valore pari a 500.
[attribute~=value]	[alt~=group]	Seleziona tutti gli elementi che specificano un attributo alt con valore contenente la parola group.
[attribute\|=value]	[alt\|=group]	Seleziona tutti gli elementi che specificano un attributo alt con valore che inizi con la parola group.
element[attribute=value]	a[title=Gallery]	Seleziona tutti gli elementi a che specificano un attributo title con valore pari alla parola Gallery.
[attribute^=value]	a[href^=”https”]	Seleziona tutti gli elementi a che specificano un attributo href (che in pratica è l’indirizzo a cui punta il link stesso) con valore che inizi con la sequenza https.
[attribute$=value]	a[href$=”.jpg”]	Seleziona tutti gli elementi a che specificano un attributo href con valore che finisca con la sequenza .jpg.
[attribute*=value]	a[href*=”.google”]	Seleziona tutti gli elementi a che specificano un attributo href con valore che contenga la sequenza .google.
:first-child	div#firstBlock span:first-child	Seleziona l’elemento span primo figlio di div#firstBlock.
::first-letter	div#firstBlock span::first-letter	Seleziona la prima lettera del testo contenuto in ogni span figlio di div#firstBlock.
::first-line	div#firstBlock span::first-line	Seleziona la prima riga del testo contenuto in ogni span figlio di div#firstBlock.
:last-child	div#firstBlock span:last-child	Seleziona l’elemento span ultimo figlio di div#firstBlock.
:not(selector)	div#firstBlock:not(p)	Seleziona tutti gli elementi contenuti in div#firstBlock, purché essi non siano tag p.
:nth-child(n)	div#firstBlock span:nth-child(2)	Seleziona il secondo tag span figlio di div#firstBlock.
:nth-last-child(n)	div#firstBlock span:last-child(2)	Seleziona il tag span secondo dal basso, purché figlio di div#firstBlock. In questo caso il penultimo, che è anche il primo nel nostro esempio.

I selettori elencati permetteranno di interpretare anche sezioni di codice molto complesse. E’ possibile provare con mano l’efficacia dei selettori utilizzando il test interattivo disponibile a questa pagina: https://www.w3schools.com/cssref/trysel.asp.

Infine una breve anticipazione: Free/Batch Data Collector implementano alcuni ulteriori selettori nativi che saranno introdotti a partire dalle prossime unità e che permettono di identificare numeri di telefono, lingua della pagina, indirizzo della pagina, titolo e altro ancora.