How to select elements that have no classes?

Question

I need to select all <input type="submit"> elements, that have no class specifier.

With:

<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input                type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">

It should select the 3rd one only.

I can imagine this CSS:

input[type="submit"]:not(ANY CLASS){
}

But, what should I write as "ANY CLASS"? Or is there a different approach alltogehter? I could enumerate all known classes there, but this is tedious and might change over time.

Note:

I am looking for a CSS-only solution. This makes this answer not a duplicate.
I want to specify "no classes at all" not omitting one single class. This makes this answer not a duplicate.

Can't you simply apply changes to other classes and leave the default `.input` selector suited for the input that has no class ? — Brewal, Jan 15 '15 at 14:15
@Brewal Unfortunately not, as I am creating a "super-css" that gets applied on top of an existing page. My CSS should be suitable for use with the "stylish"-plugin for Firefox. — Marcel, Jan 15 '15 at 14:35
I voted for reopening, as the linked answers do not actually answer this question. Although they are not wrong, they only provide a workaround, not an answer. — Marcel, Jan 15 '15 at 14:40
As the one who answered the second duplicate question I can confirm that it's completely different. — BoltClock, Jan 15 '15 at 16:40

score 10 · Accepted Answer · answered Jan 15 '15 at 14:07

You could use :not([class]), which means select an input element that does not have a class attribute.

input[type="submit"]:not([class]){
  color: red;
}

<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input                type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">

score 2 · Answer 2 · edited May 23 '17 at 12:06

2

You can use a selector like this:

input:not([class]) {
    /* style for inputs without classes */
}

JSFIDDLE DEMO

reference

edited May 23 '17 at 12:06

Community

1
1

answered Jan 15 '15 at 14:09

JRulle

7,448
6
39
61

Thanks, especially for the JSFiddle demo. Nice! – Marcel Jan 15 '15 at 14:47
1

Glad to help. If the classes on your site are dynamic (added/removed from elements via javascript), you may want to also consider catching for this alternative `input[class=""] { ... }` which would catch elements with blank classes -- [**updated JSfiddle**](http://jsfiddle.net/fd5dq03a/1/) – JRulle Jan 15 '15 at 14:50

How to select elements that have no classes?

2 Answers2