Есть ли селектор CSS для элемента без какого-либо класса?

Есть ли селектор CSS для элемента без какого-либо класса? Например, в HTML

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

Я хотел бы выбрать раздел A (или, возможно, раздел A и раздел C, это не имеет значения), произнеся что-то вроде

section:not(.*) { color: gray }

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

section { color: gray } 
section.special { color: black }

но это не то, что я хочу, потому что он не очень управляем, когда стили становятся сложными, а в некоторых случаях трудно выполнить "reset" (конечно, не в этом упрощенном примере).

Ответы

Ответ 1

С помощью section:not([class]) вы выбираете каждый раздел без атрибута класса. К сожалению, он не будет выбирать те разделы с пустым значением атрибута класса. Поэтому, кроме того, мы должны исключить следующие разделы:

section:not([class]) { /* every section without class - but won't select Section C */
  color: red;
}

section[class=""] { /* selects only Section C */
  font-weight: bold;
}
<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>