:not() psuedoclass for httml[lang] not working

user_14210329 0
Viewed 86

Trying to make a more dynamic css so do certain styling for non english html pages, instead of having to add a css rule each time a language page is added.

Trying to turn this...

html[lang='de-DE'],html[lang='pt-br'],html[lang='ja'] {
    // bootstrap blocks flexbox fix
    .col-12.d-flex > div:first-child {
        display: flex;
    }
}

To work with this...

:not(html[lang='en-US']) {
    // bootstrap blocks flexbox fix
    .col-12.d-flex > div:first-child {
        display: flex;
    }
}
sass css
1 Answers

You can view :not() as a selector specificator. It requires to refer to a selector, to then specify it.
If we apply this to your example, we would take html as the selector and html[lang=en-US] to be passed into the specificator, resulting in this:

html:not(html[lang=en-US]) {
  //content
}

We can acctually further shorten it, since [lang=en-US] is a functioning selector itself:

html:not([lang=en-US]) {
  //content
}
user_140368530
Related