How to target specific CSS elements?

[Denis_Heraud]

I want to target a specific element to modify its properties (for example):

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

But then realized it’s used all over the place in Discourse, not just in the plugin element I was trying to customize. So how would I go about targeting that specific label?

[Johani (Joe)]

You go up in the HTML tree and find a parent with a unique class.

You can then add the parent to your selector like so

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

You can also add more unique parent classes like so

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

If needed.

The same thing in SCSS would look like this

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

This should eliminate the need to use !important

[Denis_Heraud]

Thank you @Johani! You just taught me something new that will come in very handy!