CODEWITHSUNDEEP
csssass
Chris
Chris

Reputation: 14238

Is there a sass/css selector for "is descendant or has class"?

I want to select an element if it has the class .eventContainer and has a parent with class .todo, or if it has the classes .grid and .todo:

.todo .eventContainer,
.grid.todo
    background-color: gray

Is there a way to do this with nesting to avoid specifying the .todo class twice?

Upvotes: 0

Views: 2495

Answers (1)

rocambille
rocambille

Reputation: 15996

As pointed in the comments, you can use ampersand operator (see official documentation) to insert parent selector in a nested rule, something like this:

.todo
  & .eventContainer,
  &.grid
    background-color: gray

This will compile into:

.todo .eventContainer,
.todo.grid {
  background-color: gray;
}

Upvotes: 3

Related Questions