CODEWITHSUNDEEP
htmlcsssass
Sudhakar Lahane
Sudhakar Lahane

Reputation: 149

How could apply CSS property on class and element specific at same time with SCSS?

As shown underneath, there are two (div & span) HTML element having same class (content ), but on span only, I want add color property. How it will be done in SCSS?

.content {
  padding-left: 30px;
  span#{&} {
    color: red;
  }
}
<div class="content">Lorem ipsum dolor sit amet</div>
<span class="content">Lorem ipsum dolor sit amet</span>

Please help.

Upvotes: 0

Views: 111

Answers (2)

gedeon ebamba
gedeon ebamba

Reputation: 34

You can use speudo class :is,

.content {
  padding-left: 30px;
  &:is(span) {
    color: red;
  }
}

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Use @at-root which allows advanced nesting: https://sass-lang.com/documentation/at-rules/at-root

.content {
  padding-left: 30px;
  
  @at-root span#{&} {
    color: red;
  }
}

compiles into

.content {
  padding-left: 30px;
}
span.content {
  color: red;
}

Upvotes: 2

Related Questions