invalid CSS *:focus:not(.focus-visible)

AlainIb 0
Viewed 18

i have to convert some CSS from Stylus to plain CSS in a ReactJs project.

i'm stuck with this two properties who are not valid, how to fix them please ?

a{
  color: #8200a0;
  text-decoration: none;
  *:focus:not(.focus-visible) { /* error here  */
    outline: none;
  }
  &:focus-visible { /* error here  */
    outline: #ffb400 solid 4px;   
    outline-offset: 0.3rem ;
    border-radius: 0.3rem;    
  }
}

.outlineFocus {
  *:focus:not(.focus-visible) { /* error here  */
    outline: none;
  }
  &:focus-visible { /* error here  */
    outline: #ffb400 solid 4px;   
    outline-offset: 0.3rem ;
    border-radius: 0.3rem;    
  }
}
css
1 Answers

You are using nested rulesets.

.foo {
    .bar {
        x: y;
    }
    &.baz {
        a: b;
    }
}

This is a SCSS feature and is not allowed in CSS.

useraZ40
Related