In CSS, it's often necessary to signpost that we want to select an element, but in specific circumstances - like if it has a certain class. In these instances, we can use the selector to do that. Let's look at how it works. not :not() CSS not Selector The CSS selector is broadly supported by most browsers. The way it works is that we create a selector, and then specify what it should be. For example, say you have the following HTML: :not() not <div class="not-red">Not Red</div> <div class="not-red">Not Red</div> <div>Red</div> <div>Red</div> We have a bunch of s here, and some shouldn't be red. If we want all s in general on our page to be red, except for elements, we can use to ensure they remain, well, not red: div div .not-red :not(.not-red) div:not(.not-red) { color: red; } Here's another example. By default, all elements will have the Arial font - except for elements: .old-fashioned <div class="old-fashioned">Old Fashioned Text</div> <div>Some Text</div> Our CSS, where only non elements use the Arial font, which looks like this: .old-fashioned div:not(.old-fashioned) { font-family: Arial, sans-serif; } CSS not Selectors Increase Specificity You might be familiar with the concept of specificity in CSS, where certain selectors "override" others. For example, a has lower specificity than an , so any CSS properties will override properties on the same element. class id id class The selector also affects specificity. For example, if you had in your code, it still as having an , so the specificity increases as if it has an . This is useful to remember when using :not div:not(#id) counts id id :not() CSS not Selectors and the DOM structure One confusing thing about , is when you try to use it to stop styles applying to things within elements. For example, suppose you have the following HTML: :not() <div class="container"> <form> <div class="input-element"> <input type="text" /> </div> </form> <div class="input-element"> <input type="text" /> </div> </div> Let's say you want to apply a style to only elements which are not within elements. Simple, right? You might try something like this: input form div :not(form) input { border: 2px solid red; } Only , and the reason why is that is applied at every level - and we are wrapping each input in . That means that is applied to , and it is indeed, not a form. So both elements will have a red border. To avoid that, you need to remove the wrapper element and have the input be a direct child of the form: this won't work :not() .input-element :not(form) .input-element input <div class="container"> <form> <input type="text" /> </form> <input type="text" /> </div> That way the input in the form, will not inherit the styles from . div :not(form) input CSS not Selector Support that there are two versions of the selector - one which accepts only a single, simple CSS selector, and the newer update to which accepts any CSS selector. It is important to note :not() :not() support single, simple selectors, like the ones we've used so far, including Internet Explorer. However, not all browsers support complex selectors. With simple selectors in , you can do all of the following: All browsers :not() :not :not(#id) :not(.class) :not(element) :not([attrbute]) However, things like the following are only available with complex selectors: :not(#id, .class, [attribute]) :not(#id.class) :not(element#id, #id.class) Fortunately, support for complex selectors is still quite high. The only browser not supporting complex selectors today is Internet Explorer and some mobile browsers: Also published . here
