CSS Attribute Selector Class Starts with But Not Equals To

CSS attribute selector class starts with but not equals to

As mentioned in your question:

Don't add whitespace unnecessarily. The whitespace just before the
:not is significant, i.e. it changes the meaning of the selector.

---

a[class^="abcd"]:not(.abcd-dontapply)
{
    /* define CSS here*/
}

You can find all attribute selectors specifications here.

Can't find a not equal css attribute selector

Use the code like this:

div[foo]:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

Is there a CSS not equals selector?

In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now
supported by all major browsers (and has been for quite some time; this is an old answer...).

Example:

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

and the CSS

input:not(.avoidme) { background-color: green; }

---

Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.

If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.

input { background-color: green; }
input.avoidme { background-color: white; }

CSS selector to check that attribute does not contain both values

As you mentioned, you want something equivalent to :not([style*='display'][style*='none']), which is invalid in CSS, since :not() allows no combined selectors.

The laws of logic help us out here. Remember that !(a AND b) == !a OR !b, so we can write

:not([style*='display']), :not([style*='none'])

since in CSS, a, b matches elements that satisfy selector a OR selector b.

Again, as said in the question, this does not take the order of the words into consideration. The latter is impossible in CSS, since none of the CSS attribute selectors consider word order.

Attribute selector where value equals either A or B?

You may simply list them as individual selectors:

input[type="username"],
input[type="password"] {
  color: blue;
}

<form>
  Username: <input type="username" name="Username" value="Username" />

  Password: <input type="password" name="Password" value="Password" />

  <input type="submit" value="Submit" />
</form>

css selector to match an element without attribute x

:not selector:

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

Support: in Internet Explorer 9 and higher

How to get CSS to select ID that begins with a string (not in Javascript)?

[id^=product]

^= indicates "starts with". Conversely, $= indicates "ends with".

The symbols are actually borrowed from Regex syntax, where ^ and $ mean "start of string" and "end of string" respectively.

See the specs for full information.

How to write a CSS Selector selecting elements NOT having a certain attribute?

I think more accurate CSS Selector is:

div[class]:not([style])>button

because the button element is a child of div element.

Hope it helps you!

How to select element that does not contain class

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

---

Related Topics