Пытаюсь сделать более динамичный css, чтобы делать определенную стилизацию для неанглоязычных html-страниц, вместо того чтобы добавлять правило css каждый раз, когда добавляется языковая страница.

Попытка превратить это...

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

Для работы с этим...

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

MPortman

Ответов: 1

Ответы (1)

Вы можете рассматривать :not() как спецификатор селектора. Он требует ссылки на селектор, чтобы затем уточнить его.
Если мы применим это к вашему примеру, мы возьмем html в качестве селектора и html[lang=en-US] передадим в спецификатор, в результате чего получится следующее:

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

На самом деле мы можем сократить его еще больше, поскольку [lang=en-US] сам является функциональным селектором:

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

2022 WebDevInsider