Menu
The :not(selector) selector is used to style every element that is not specified by the selector. Since it prevents specific items from being selected, it is also known as the negation pseudo-class. Example: In this example, we have used the :not selector and paragraph element.
The table outlines that attribute selectors are approximately 3x slower compared to standard classes. Relying on attribute selectors also requires more characters to target an element. It's better to define short and concise class names to keep your stylesheet small.
The :not() property in CSS is a negation pseudo class and accepts a simple selector or a selector list as an argument. It matches an element that is not represented by the argument. The passed argument may not contain additional selectors or any pseudo-element selectors.
Use the code like this:
div[foo]:not([foo=''])
{
/* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}
One problem with the accepted answer is that it will also select elements that do not have a foo attribute at all. Consider:
<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>
div:not([foo='']) will select both the first and second div elements. If you only want div elements that have an attribute foo that is set to an empty string, you should use:
div[foo]:not([foo=''])
If you want all elements with attribute foo that is neither y nor z, you should use:
div[foo]:not([foo='y']):not([foo='z'])
:not([foo=''])
{
background: red;
}
http://jsfiddle.net/gsLvuys0/
You can select the first one using
[foo = 'x']{
background:red;
}
FIDDLE
Read this
BTW if you are trying to select all elements with a certain attribute except for ones with the specific value, you could do something like this:
[data-foo]:not([data-foo="foo"]) {
/* matches <div data-foo="bar"> but not <div data-foo="foo"> or <div> */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With