Olá @b481
O que você está procurando é chamado de “seletor CSS” (ou apenas “seletor”, para abreviar). Seletores CSS são usados para “encontrar” (ou selecionar, obviamente) o elemento do DOM que você deseja estilizar.
Por exemplo, de onde estou digitando agora, vou procurar o seletor do seu nome de usuário no compositor (apenas um exemplo).
O que fazemos é passar o mouse sobre o elemento (seu nome de usuário b481 no compositor), clicar com o botão direito e um menu aparecerá com o item “Inspecionar”.
Clique em “Inspecionar” e o console de desenvolvedor (agora estou no Chrome, no macOS); e com um pouco de sorte, o elemento que queremos estará destacado.
Se você clicar com o botão direito sobre o elemento destacado no console, verá um item de menu Copiar → Copiar seletor.
Se você fizer isso e copiar o seletor, neste exemplo, obterá:
#ember433 > span > a
Isso não é realmente um seletor muito bom porque o #ember433 é atribuído pelo Ember, mas você pode passar o mouse sobre os elementos no console e eles serão destacados tanto na página de interesse quanto no console. A boa notícia é que estamos no caminho certo, de forma rápida e fácil.
Você pode então encontrar o elemento que deseja ocultar e, neste exemplo, pode clicar com o botão direito novamente no elemento (neste exemplo) e testar escolhendo “adicionar atributo” no menu sob o mouse para testar nosso seletor.
Acabei de fazer isso como exemplo nesta captura:
e agora esse elemento com seu ID ‘b481’ está oculto naquela parte do DOM…
Então, sabemos, neste caso, que se usarmos o CSS:
span.action-title{
display:none;
}
Podemos adicioná-lo ao nosso tema e teremos ocultado esse elemento.
Neste caso, você deve verificar se há mais de um elemento na página com o mesmo seletor e também deve verificar para garantir que o seletor escolhido não será excessivo e selecionará elementos em outras páginas que você não deseja ocultar.
Quanto mais específico for o seletor, melhor.
Por exemplo, neste caso, podemos torná-lo mais específico, indicando que nosso seletor é um filho de um elemento pai, neste caso (não testado):
div.compose-action-title > span.action-title{
display:none;
}
Você pode ver que estamos ficando mais específicos; e neste ponto, você deve ter uma boa ideia de como procurar os elementos que deseja modificar.
Boa caçada!
Uma observação final:
Você pode usar JavaScript e jQuery para selecionar elementos, mas descobri que em aplicativos SPA como Discourse/Ember, seletores CSS funcionam bem, pelo menos para mim. Eu costumo usar seletores JavaScript apenas quando preciso percorrer o DOM de alguma forma “complexa” (o que também pode ser muito divertido).
Espero que isso ajude.
Veja também: