Ciao @b481
Quello che stai cercando si chiama “selettore CSS” (o semplicemente “selettore” per brevità). I selettori CSS vengono utilizzati per “trovare” (o selezionare, ovviamente) l’elemento DOM che desideri stilizzare.
Ad esempio, da dove sto scrivendo ora, cercherò il selettore per il tuo nome utente nel compositore (solo un esempio).
Cosa facciamo: passiamo il mouse sopra l’elemento (il tuo nome utente b481 nel compositore), facciamo clic con il tasto destro e apparirà un menu con la voce “Ispeziona”.
Clicca su “Ispeziona” e si aprirà la console per sviluppatori (ora sto usando Chrome su macOS); con un po’ di fortuna, l’elemento che ci interessa verrà evidenziato.
Se fai clic con il tasto destro sull’elemento evidenziato nella console, vedrai la voce di menu Copia–>Copia selettore.
Se scegli questa opzione e copi il selettore, in questo esempio otterrai:
#ember433 > span > a
Questo non è un selettore molto buono perché #ember433 è assegnato da Ember, ma puoi spostare il mouse sopra gli elementi nella console e vedrai che verranno evidenziati sia nella pagina di interesse che nella console. La buona notizia è che siamo già vicini, velocemente e facilmente.
Puoi quindi trovare l’elemento che desideri nascondere e, in questo esempio, puoi fare di nuovo clic con il tasto destro sull’elemento (questo esempio) e testarlo scegliendo “aggiungi attributo” dal menu sotto il mouse per verificare il nostro selettore.
Ho appena fatto questo come esempio in questa cattura:
e ora quell’elemento con il tuo id ‘b481’ è nascosto in quella parte del DOM…
Quindi, sappiamo che in questo caso, se usiamo il CSS:
span.action-title{
display:none;
}
possiamo aggiungerlo al nostro tema e avremo nascosto quell’elemento.
In questo caso, dovresti verificare se ci sono più elementi nella pagina con lo stesso selettore e dovresti anche assicurarti che il selettore scelto non sia troppo “grezzo” e non selezioni elementi su altre pagine che non desideri nascondere.
Più specifico è il selettore, meglio è.
Ad esempio, in questo caso, possiamo renderlo più specifico specificando che il nostro selettore è un figlio di un elemento genitore, in questo caso (non testato):
div.compose-action-title > span.action-title{
display:none;
}
Puoi vedere che stiamo diventando più specifici; e a questo punto dovresti avere un’idea abbastanza chiara di come cercare gli elementi che desideri modificare.
Buona caccia!
Un’ultima nota:
Puoi usare JavaScript e jQuery per selezionare elementi, ma ho scoperto che nelle app SPA come Discourse/Ember, i selettori CSS funzionano bene, almeno per me. Tendo a usare i selettori JavaScript solo quando devo attraversare il DOM in modo “complicato” (il che può anche essere molto divertente).
Spero che questo ti sia d’aiuto.
Vedi anche: