How to select element that does not contain class that starts with a prefix

Question

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

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

This is not working. Any other ideas?

Possible duplicate of [Can I write a CSS selector selecting elements NOT having a certain class?](http://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class) — James Waddington, May 26 '16 at 16:23

Rion Williams · Accepted Answer · 2016-05-26T16:31:59.383

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.

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.

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' />

doesn't seem to work. Not usually does but not in this case for me — evanjmg, Jul 06 '23 at 13:48

Nenad Vracar · Answer 2 · 2016-05-26T16:29:30.670

5

Try input:not([class^="border-radius"]) instead. Attribute selectors are written inside square brackets [].

input:not([class^="border-radius"]) {
  background: blue;
}

<input type="text">
<input type="text" class='border-radius'>
<input type="text" class='border-radius-something'>

edited May 26 '16 at 16:29

answered May 26 '16 at 16:23

Nenad Vracar

118,580
15
151
176

score 2 · Answer 3 · answered May 26 '16 at 16:22

2

You need to update your selector to this:

input:not(.border-radius)

answered May 26 '16 at 16:22

kiaaanabal

366
2
12

This does not work for all elements who contain a class that begins with `border-radius` – MultiDev May 26 '16 at 16:24
downvoting because this it doesn't address the question of "begins with" – CWSites Mar 24 '21 at 17:09

Basheer AL-MOMANI · Answer 4 · 2017-09-14T09:15:24.150

-1

try this in javascript

this.el.on('click', 'ul.pagination li:not(.disabled,.active)', function ....

edited Sep 14 '17 at 09:15

answered Sep 13 '17 at 12:14

Basheer AL-MOMANI

14,473
9
96
92

1

The user isn't asking for JS functionality, they are asking for CSS selection – CWSites Mar 24 '21 at 17:10

How to select element that does not contain class that starts with a prefix

4 Answers4