How to target specific CSS elements?

Support
2

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

7 Likes