Il testo selezionato WordPress CSS può essere personalizzato cambiando il colore dello sfondo e delle lettere quando un visitatore evidenzia una parte della pagina. La modifica si applica tramite il selettore CSS ::selection, senza intervenire sui file del tema e senza installare plugin aggiuntivi. Il metodo più sicuro consiste nell’inserire il codice nella sezione CSS aggiuntivo di WordPress, così il tema resta aggiornabile. Prima di pubblicare, è importante verificare il contrasto, il funzionamento su desktop e smartphone e la compatibilità con i principali browser.

Come funziona il selettore CSS `::selection` in WordPress

Il selettore CSS ::selection controlla l’aspetto del testo evidenziato dall’utente con il mouse, il touchpad o la tastiera. Può modificare principalmente il colore del testo e il colore dello sfondo della selezione, mentre non permette di applicare liberamente tutte le proprietà CSS disponibili per gli elementi normali.

Il codice base per personalizzare il testo selezionato WordPress CSS è il seguente:

::selection {
background-color: #1e73be;
color: #ffffff;
}

In questo esempio, il testo selezionato avrà uno sfondo blu e lettere bianche. Il selettore è globale, quindi interessa il contenuto della pagina, i titoli, i paragrafi, i link e gli altri elementi testuali, salvo eventuali regole più specifiche definite dal tema o dai plugin.

Per una compatibilità più ampia con versioni meno recenti di Firefox, è possibile aggiungere anche il prefisso ::-moz-selection:

::selection {
background-color: #1e73be;
color: #ffffff;
}

::-moz-selection {
background-color: #1e73be;
color: #ffffff;
}

I browser moderni supportano normalmente ::selection, ma mantenere anche ::-moz-selection è una scelta prudente quando il sito deve funzionare su dispositivi o installazioni non aggiornate.

Dove inserire il CSS senza modificare il tema

Il CSS personalizzato va inserito nell’area prevista da WordPress, non direttamente nel file style.css del tema principale. Una modifica al tema principale può infatti essere sovrascritta durante un aggiornamento.

Passo 1: usare il Personalizza di WordPress

Con molti temi classici, il percorso è:

Aspetto → Personalizza → CSS aggiuntivo

Nel riquadro dell’editor incolla il codice CSS, quindi usa l’anteprima per controllare il risultato e seleziona Pubblica per rendere effettiva la modifica.

La voce può avere un nome leggermente diverso in base alla versione di WordPress, al tema attivo o ai permessi dell’account. Se CSS aggiuntivo non compare, il tema potrebbe usare l’Editor del sito.

Passo 2: usare l’Editor del sito nei temi a blocchi

Nei temi a blocchi basati sull’Editor del sito, il percorso può essere:

Aspetto → Editor → Stili → menu con tre punti → CSS aggiuntivo

Dopo aver incollato il codice, salva le modifiche. La posizione esatta può variare tra WordPress e il tema attivo, perché alcuni temi mostrano le opzioni CSS in aree diverse dell’Editor del sito.

Passo 3: verificare il risultato sul front-end

Apri una pagina pubblica del sito e seleziona una parte del testo con il mouse. Su Windows, puoi anche usare Ctrl+A quando il cursore si trova nell’area della pagina; su macOS, la combinazione equivalente è Comando+A.

Controlla il risultato su:

paragrafi e titoli;
collegamenti ipertestuali;
testo dentro pulsanti o blocchi personalizzati;
pagine del blog;
versione mobile del sito.

La cache può ritardare la visualizzazione del CSS. Se la modifica non appare, svuota la cache del plugin di ottimizzazione, della rete di distribuzione dei contenuti o del browser, quindi ricarica la pagina.

Come scegliere colori leggibili e compatibili con il tema

Il colore della selezione deve distinguersi chiaramente dallo sfondo della pagina e mantenere un testo facilmente leggibile. Uno sfondo molto chiaro con testo bianco, oppure uno sfondo scuro con testo nero, può rendere quasi invisibile il contenuto selezionato.

Una combinazione semplice e generalmente efficace è:

::selection {
background-color: #ffcc00;
color: #111111;
}

::-moz-selection {
background-color: #ffcc00;
color: #111111;
}

Il contrasto va valutato insieme al colore del testo, non solo osservando il colore dello sfondo. Il tema può usare colori diversi per titoli, link e blocchi, quindi una singola combinazione non produce necessariamente lo stesso risultato in ogni area.

È preferibile usare colori opachi e ben distinti, evitando trasparenze eccessive. Il testo selezionato non deve confondersi con lo sfondo della pagina, con i bordi dei pulsanti o con i colori già utilizzati per segnalare errori e avvisi.

La personalizzazione della selezione non deve sostituire altri indicatori visivi importanti. Per esempio, il colore dei link, il bordo del focus da tastiera e gli stati di errore dei moduli devono rimanere riconoscibili anche quando l’utente non sta selezionando il testo.

Come applicare il testo selezionato solo a una parte del sito

La regola globale ::selection è adatta quando vuoi uniformare l’aspetto della selezione in tutto il sito. Se invece vuoi limitare l’effetto al contenuto degli articoli, puoi usare un selettore più specifico.

Per molti temi WordPress, una regola possibile è:

.entry-content ::selection {
background-color: #1e73be;
color: #ffffff;
}

.entry-content ::-moz-selection {
background-color: #1e73be;
color: #ffffff;
}

La classe .entry-content è comune nei temi WordPress, ma non è obbligatoria. Il tema attivo potrebbe usare nomi come .wp-block-post-content, .post-content o altre classi personalizzate. Per verificare il nome corretto, apri la pagina nel browser, fai clic destro sul contenuto e seleziona Ispeziona oppure Esamina elemento.

Nei temi a blocchi, il contenuto degli articoli può essere racchiuso in una struttura con classi specifiche del tema. Una regola più mirata potrebbe essere:

.wp-block-post-content ::selection {
background-color: #1e73be;
color: #ffffff;
}

Non usare selettori molto generici come div::selection senza una necessità precisa. Una regola di questo tipo può creare conflitti o rendere più difficile capire quali aree del sito siano coinvolte.

Come risolvere i problemi più comuni

Se il codice non produce alcun effetto, verifica innanzitutto che sia stato incollato nell’area CSS aggiuntivo del tema attivo e che le modifiche siano state salvate. Un errore nelle parentesi graffe, nei punti e virgola o nei codici colore può impedire l’applicazione della regola.

Quando il tema sovrascrive il colore della selezione, prova a usare un selettore più specifico, ma evita di ricorrere subito a !important. In molti casi è sufficiente collocare la regola nel CSS aggiuntivo, che viene caricato dopo i fogli di stile principali:

body ::selection {
background-color: #1e73be;
color: #ffffff;
}

body ::-moz-selection {
background-color: #1e73be;
color: #ffffff;
}

Se il problema compare solo in un browser, aggiorna il browser e verifica la pagina in una finestra privata. Alcune estensioni possono modificare i colori, bloccare fogli di stile o alterare il comportamento dei contenuti selezionati.

L’uso di un tema child è un’alternativa adatta a personalizzazioni CSS più ampie e permanenti, ma per una sola regola ::selection l’area CSS aggiuntivo è generalmente più rapida e meno rischiosa. Non modificare direttamente i file del tema principale, perché gli aggiornamenti possono sostituire le modifiche manuali.

Il testo selezionato WordPress CSS funziona meglio quando il colore scelto migliora la leggibilità senza alterare l’identità visiva del sito.

Potrebbe interessarti anche:

FAQ

Sì. Puoi impostare solo background-color, lasciando invariato il colore del testo, anche se è consigliabile controllare che il contrasto resti sufficiente.

No, se lo inserisci in CSS aggiuntivo non modifichi i file del tema. La regola può però essere collegata al tema attivo e va verificata dopo un eventuale cambio di tema.

Controlla che il CSS sia stato salvato, svuota la cache e verifica la specificità dei selettori del tema. Il codice può essere limitato a una classe diversa da quella usata dal tema attivo.

No. WordPress può applicare il selettore ::selection tramite la sezione CSS aggiuntivo, senza plugin dedicati.

Sì. La regola globale funziona anche con i blocchi Gutenberg; per limitarla al contenuto degli articoli devi usare la classe effettivamente presente nel markup del tema.

Altri articoli di questa serie: