CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-class
Marcel
Marcel

Reputation: 15722

How to select elements that have no classes?

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:

Upvotes: 1

Views: 223

Answers (2)

JRulle
JRulle

Reputation: 7568

You can use a selector like this:

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


JSFIDDLE DEMO

reference

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22992

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">

Upvotes: 10

Related Questions