Categorie
CSS Tips Web development

Selettore CSS elemento: ottenerlo con Chrome DevTools

Il selettore CSS di un elemento permette di identificare quest’ultimo all’interno di una pagina HTML.

Può essere utilizzato per diversi scopi, come applicare una regola CSS per questioni estetiche, manipolare il DOM tramite JavaScript, o effettuare delle assunzioni (i.e. “Expectations”) durante l’esecuzione di tests End-To-End.

In questo articolo ti mostrerò le funzionalità di Chrome DevTools che permettono di ottenere il selettore CSS di un determinato elemento.

Cosa è il Chrome DevTools

Chrome DevTools è un set di strumenti per web developers inclusi con il browser Google Chrome.

Attraverso di esso è possibile eseguire molteplici operazioni sul DOM ed ottenere diverse informazioni sulla pagina web visualizzata.

Puoi accedere al Chrome DevTools in diversi modi:

  • Utilizzando il tasto destro su un punto qualunque della pagina, cliccando su “Ispeziona”
  • Premendo sulla tastiera il tasto F12
  • Utilizzando il menu posto in alto a destra (icona con 3 puntini), Altri strumenti, Strumenti per sviluppatori

Puoi trovare un esempio pratico di utilizzo di questo strumento nell’articolo Eseguire codice JavaScript su qualunque pagina web.

Come trovare il selettore CSS di un elemento

Per ottenere il apri Chrome DevTools, clicca sull’icona in alto a sinistra raffigurante un riquadro con sopra il puntatore del mouse, quindi clicca l’elemento della pagina di cui vuoi ottenere il selettore CSS.

ottenere selettore css

Si evidenzierà la parte di DOM corrispondente all’elemento selezionato.

Clicca tasto destro sulla parte evidenziata, Copia, Copia Selettore.

Nel caso dell’esempio mostrato nella GIF animata, il selettore ottenuto è il seguente:

#post-1348 > div.post-inner.thin > div > h2:nth-child(3)

Altre informazioni oltre al selettore CSS

Analogamente a quanto fatto per trovare il selettore CSS dell’elemento, è possibile ottenere altre informazioni, come il codice JavaScript per ottenere il riferimento all’elemento o il selettore XPath.

Ottenere il codice JavaScript

Per ottenere il codice JavaScript dovrai cliccare con il tasto destro sulla parte del DOM evidenziata, Copia, Copia percorso JS.

Nel caso di quando mostrato nella GIF, si ottiene il seguente codice:

document.querySelector("#post-1348 > div.post-inner.thin > div > h2:nth-child(3)")

Trovare selettore XPath

Puoi trovare il selettore XPath cliccando con il tasto destro sulla parte del DOM evidenziata, Copia, Copia XPath.

Nel caso di quando mostrato nella GIF, si ottiene il seguente selettore:

//*[@id="post-1348"]/div[1]/div/h2[1]

Conclusioni

In questo articolo hai visto come ottenere diverse informazioni utili riguardo ad un elemento della pagina web che stai visualizzando, come il selettore CSS, il codice JavaScript per avere una referenza all’elemento ed il selettore XPath.

Seguimi su