Partiamo da un'idea: la gestione di un'enciclopedia, un catalogo prodotti o un blog, come può essere Aspitalia.com, al cui interno vi è la possibilità di effettuare ricerche testuali. A seguito della ricerca 'un blog come può essere Aspitalia.com' probabilmente otterremo un link che ci porterà proprio a questo script.

Ma come facciamo a sapere dove è scritta quella stringa che abbiamo cercato? Certo, il meccanismo più collaudato è ricercare all'interno della pagina usando il browser, ma in realtà esiste un metodo per evidenziare quella specifica stringa tramite il CSS.

Per riuscirci dobbiamo ricordarci dell'esistenza di tre elementi poco considerati nella vita quotidiana di uno sviluppatore:

• CSS pseudo-element: associato ad un selettore ne identifica una parte. p::first-line
• CSS pseudo-class: associato ad un selettore ne identifica uno stato. p:hover
• Url fragment: frammento di Url identificato tramite #

Predisponiamo la pagina finale per poi capire come chiamarla correttamente

<style>
#contenitore:target {
  border: 2px dashed #444;
  background-color: #e0ffe0;
}
::target-text {
  color: #d63384;
  background-color: #fff3cd;
}
</style>

<p id="contenitore">
    Prova a cercare in questo paragrafo del testo
    <br>
    Questa parte deve essere evidenziata</p>

La struttura mostra un contenitore che, se in stato target, avrà un bordo e un colore di sfondo, e al suo interno, il contenuto che verrà definito come target-text sarà evidenziato.

Per accedere alla pagine occorrerà utilizzare un url composto ad-hoc per interagire con l'agente del browser.

<url-pagina>#:~:text=Questa%20parte%20deve%20essere%20evidenziata

:~: informa il browser che quello che verrà in seguito saranno istruzioni per lo user-agent e con text= specifichiamo la direttiva di testo che identifica l'azione da eseguire, appunto la ricerca della stringa.