Why aren't my attribute selectors working?

Question

I'm trying to use multiple attribute selectors, but my code just doesn't seem to work at least in CodePen...

I googled a lot, but I just can't find a solution.

I've written them in SCSS:

*[class^="inset"] {
  &[class*="-t0"] {
    top: 0;
  }
  &[class*="-r0"] {
    right: 0;
  }
  &[class*="-b0"] {
    bottom: 0;
  }
  &[class*="-l0"] {
    left: 0;
  }
}

here's a runnable demo with compiled CSS:

 *[class^="inset"][class*="-t0"] { top: 0; } *[class^="inset"][class*="-r0"] { right: 0; } *[class^="inset"][class*="-b0"] { bottom: 0; } *[class^="inset"][class*="-l0"] { left: 0; }

 <button class="inset-t0">Button</button>

Answer 1

Selecting like this implies there are two css classes in the element, like

<button class="inset -t0"></button>

You can simply do the following:

.inset {
  &-t0 {
    top: 0;
  }
  &-r0 {
    right: 0;
  }
  &-b0 {
    bottom: 0;
  }
  &-l0 {
    left: 0;
  }
}

Answer 2

.inset {
  &-t0 {
    top: 0;
  }

  &-r0 {
    right: 0;
  }

  &-b0 {
     bottom: 0;
  }

  &-l0 {
    left: 0;
  }
}