Como direcionar elementos CSS específicos?

Suporte
1

Quero direcionar um elemento específico para modificar suas propriedades (por exemplo):

.d-button-label { display: none !important;}

Mas percebi que ele é usado em todo o Discourse, não apenas no elemento do plugin que eu estava tentando personalizar. Então, como eu poderia direcionar esse rótulo específico?

Screen Shot 2020-04-06 at 10.35.15 PM copy
Screen Shot 2020-04-06 at 10.35.15 PM copy542×283 39.6 KB

Screen Shot 2020-04-07 at 12.22.13 AM
Screen Shot 2020-04-07 at 12.22.13 AM1257×306 70.5 KB

2

Suba na árvore HTML e encontre um elemento pai com uma classe única.

Em seguida, você pode adicionar o pai ao seu seletor da seguinte forma:

.parent-class .child-class {
  display: none;
}

Você também pode adicionar mais classes de pai únicas, assim:

.grandparent-class .parent-class .child-class {
  display: none;
}

Se necessário.

O mesmo conceito em SCSS ficaria assim:

.grandparent-class {
  .parent-class {
    .child-class {
      display: none;
    }
  }
}

Isso deve eliminar a necessidade de usar !important.

3

Obrigado @Johani! Você acabou de me ensinar algo novo que será muito útil!