73

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).

Improve this question
6
  • you can select element by section:nth-child(1){ background : red;} and apply effect Commented Apr 1, 2016 at 11:55
  • thanks for editing the question. I mentioned sass because I am happy enough even with sass only solution. Pure css would be better however. Commented Apr 1, 2016 at 12:10
  • 1
    This has absolutely nothing to do with Sass because whatever selector you write must be valid CSS in the end. The tag was removed for a reason. Do not add it back in. Commented Apr 1, 2016 at 12:16
  • Your idea somehwat goes against the ideas of inheritance and specificity in CSS. Instead of considering the styling of .special as a "reset", you should see it as a "refinement" applied to a subset of your section selection. The solutions given to your question won't give you optimal performance and will make things more complicated. (By the way, your first CSS example looks shorter because you omit : section { color: black; }). Commented Apr 1, 2016 at 12:20
  • @Nicolas Le Thierry d'Ennequin: The reason section { color: black; } is omitted is because it's not needed in the first place - presumably it's taking on the default already. The second example clearly shows the redundancy of setting a color for all sections and then having to remove it from every possible class that the sections can have. I don't understand why you think the first example would be more complicated. As for performance, between that and maintainability, you only get to pick one. Commented Apr 1, 2016 at 15:58

1 Answer 1

Reset to default
126

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

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Neither matches <section class=" ">4</section> which also could be said to have no class.
or class=" , , , , " for that matter, or just any class value without correct classes.
IF the :not([class]) part is standard, than this is good enough for me. I understand that there is infinite possibilities how to screw it with empty classes, but the only thing I might practically consider is class with no character at all.
@Senthe - A comma is a valid class name. so such an element does not have no class and [class~=","] will match it.
@Alohci: And, more importantly, so will .\,. (More importantly, because [class~=","] doesn't carry classname semantics, although the rules on whitespace delimiters happen to be the same.)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.