How do i use Sass' "&" (ampersand) to check if element is a certain tag (ex.: div)

Question

I'm styling a table using Sass and I want to customize the styles of an element with a certain class differently depending on this element's tag (either <td /> or <th />).

I thought of using

.foo {
  /* td styles here */
  & th { /* th styles here */ }
}

but that does not work. (it selects the children of ".foo" that have the th tag)

Is there any way that I can use the Sass' "&" (ampersand) to style elements with the same class depending on their tag?

Fabrizio Calderan · Answer 1 · 2021-07-06T13:47:17.453

1

Use :is()

.foo {
   &:is(td) { /* td styles here */ }
   &:is(th) { /* th styles here */ }
}

the compiled SCSS will result in this CSS

.foo:is(td) {
  color: #9bc
}

.foo:is(th) {
  color: #666
}

<table>
  <tr>
    <th class="foo">heading</th>
    <td class="foo">table cell</td>
  </tr>
</table>

edited Jul 06 '21 at 13:47

answered Jul 06 '21 at 13:43

Fabrizio Calderan

120,726
26
164
177

Doesn't seem to work as SASS: https://jsfiddle.net/bo15mfug/1/ – isherwood Jul 06 '21 at 13:47
@HelloiAbrew if this helps could you add SCSS in the tags of your question? – Fabrizio Calderan Jul 06 '21 at 13:50

How do i use Sass' "&" (ampersand) to check if element is a certain tag (ex.: div)

1 Answers1