CODEWITHSUNDEEP
csssass
xylar
xylar

Reputation: 7673

Set style if element have one common common class and another

Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:

<div class="plate eggs"></div>
<div class="plate bacon"></div>

but not:

<div class="plate"></div>

The code I have at the moment but I'm sure there's a way to combine the two rules?

.plate {

  border: none;

  &.eggs {

    border: 1px solid red;
  }

  &.bacon {
    border: 1px solid red;
  }
}

Upvotes: 0

Views: 41

Answers (2)

Vlad Gor
Vlad Gor

Reputation: 236

SCSS:

.plate {
  border: none;
  &.eggs,&.bacon {
    border: 1px solid red;
  }
}

SASS:

.plate
  border: none
  &.eggs,&.bacon
    border: 1px solid red

You can validate your styles in sassmeister.

Upvotes: 2

karanis
karanis

Reputation: 51

Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]

Upvotes: 0

Related Questions