JROB JROB - 6 months ago 29
CSS Question

How to select element that does not contain class

I am attempting to set a style for all input elements that do not contain a class the begins with "border-radius":

input:not(class^="border-radius") {


This is not working. Any other ideas?

Answer

Check Your Syntax

Ensure that your class attribute selector is contained within square braces to avoid any syntax issues.:

input:not([class^="border-radius"]) {
   /* Your style here */
}

Handling Multiple Classes

Additionally, if you expect to contain multiple classes, you might want to consider using the contains selector *= instead as the previous approach will only work if the first class attribute starts with "border-radius" :

input:not([class*="border-radius"]) {
   /* Your style here */
}

Examples

This is an example demonstrating the starts-with ^= selector.

enter image description here

input { margin: 10px}

input:not([class^="border-radius"]) {
  background: yellow;
}
<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />

This is an example demonstrating the contains *= selector.

enter image description here

input { margin: 10px}

input:not([class*="border-radius"]) {
  background: yellow;
}
<input class='border-radius' />
<input class='normal' />
<input class='test border-radius' />
<input class='another-normal' />
<input class='border-radius-5' />

Comments