CSS: нацеливание на элемент, у которого нет списка классов - PullRequest
Новая
       8

CSS: нацеливание на элемент, у которого нет списка классов

1 голос
/ 08 января 2020

Я хотел бы создать правило для определенных элементов, которое влияет на элемент, только если у него есть нет списка классов .

Моя попытка: 

div:not(.a, .c) {
  color: red;
}
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

Если вы запустите этот фрагмент, он, очевидно, не будет работать как задумано. Кажется, селектор недействителен и не влияет ни на что div.

Далее я попытался создать цепочку :not(), которая кажется очень неуклюжей, но работает: 

div:not(.a):not(.c) {
  color: red;
}
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

Это единственный способ решить данную проблему?

Ответы [ 2 ]

1 голос
/ 09 января 2020

Цепочка селектора :not() в CSS - единственный способ (в январе 2020 г.) указать логический оператор AND .

Итак, да: 

div:not(.a):not(.c)

- правильный способ записи:

div:not(.a) И div:not(.c)

div:not(.a):not(.c) {
  color: red;
}
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
0 голосов
/ 08 января 2020

Я думаю, что по вашему вопросу вы всегда знаете классы, для которых не хотите менять стили. Предполагая, что это мое мнение. 

.all {
  /** give default styles to all elements */
  color: red;
}

.a,
.c {
  /** then reset the ones you where targeting with :not():not()... */
  color: black;
}
<div class="all a">a</div>
<div class="all b">b</div>
<div class="all c">c</div>
...