Is there a CSS selector for element without any class?

CssCss Selectors

Css Problem Overview


Is there a CSS selector for element without any class? For example in HTML

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

I would like to select Section A (or maybe Section A and Section C, it does not matter that much), by saying something like

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

I understand that I could define it to section and reset it back in all particular classes, like in

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

but this is not what I want, because it is not very manageable once the styles get complex and in some cases it is hard to do the "reset" properly (of course not in this simplified example).

Css Solutions


Solution 1 - Css

With section:not([class]) you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:

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>

Further reading

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiongornView Question on Stackoverflow
Solution 1 - CssMarvinView Answer on Stackoverflow