The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!
The Specification
The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.
What it says here, is that a selector with a :not() in it will match all elements that do not match what’s between the parenthesis.
A simple selector is a term used in the specifications. A simple selector is: a single element, attribute selector, class, id or pseude-class.
Examples of simple selectors:
body
*
[value="foo"]
.foo
#foo
:hoverBasically, any of the above type, but with only one selector.
The browsers
The :not() selector is only supported by modern browsers (Firefox, Safari and Opera), :not(IE).
Let’s take a look at what browsers allow you to do:
div:not(.home) {…}This selects all div elements that do not have the class .home
div *:not(p) em {…}This selects all em elements that are in an element (that is not a p element) and that are in a div element. so <div><strong><em>…</em></strong></div> is a match, but <div><p><em>…</em></p></div> is not.
input:not([type="file"]) {…}This uses the attribute selector to select all input element, save for the file upload ones.
I was surprised to find out that
h2:not(.foo, .bar) {…}also works. You can give the :not() selector a comma separated list as well! (Tested in Firefox 3) This is surprising, because it’s not documented as such in the specifications.
You can use the :not() selector as a part of a large selector. I’ve done this a few times in my current design:
li:not(.pingback) .comment-content p:first-child:first-line {…}
body:not(.home) h2 + p:first-letter {…}
.post:not(.first-post) a:hover {…}The :not() selector is a nice addition to the CSS Tookit, and it can already be used in a way that allows for graceful degradation, such as I do on this website. If you have any nice experiences with :not(), please share them in the comments!
41 comments
do you have any idea wether ie 8 (beta) is supporting this…
Wilfred, unfortunately, IE8 doesn’t support any of the CSS3 selectors that weren’t already in IE7, which means it only supports the substring matching of attribute selectors (
[att^=val]etc.)Watch this IE-Overview
I found using :not() most useful when I am doing Jquery coding. I can do something like
$(div’.foo:not(#’+bar+’) img’).doStuff();
to get all the images that are children of divs with a class of foo but not with a id that I pass into the jquery.
Of course using Jquery for this get around the browser problems too.
[...] un selector del que no se ha hablado mucho y que realmente dará mucho juego en un futuro. Este selector, nos permite negar las busquedas que [...]
IE is fail, they need to get on with it and add CSS3 support immediately!
Oh, crap. Another useless feature to come up in CSS3. Hope it gets boycotted by the browsers.
Cool article.
I find it quite useful. Maybe you have 5 divs that need the same style except one.
And you should do:
.div1,
.div2,
.div3,
.div4,
.div5
{…}
It saves some lines, and is more practical.
[...] 参考自 Kilian Valkhof 的文章。 [...]
That’s brilliant. That would save me from having to declare quite a few slightly varied classes, and instead, combining them into one statement with a
:notselector on just a few of them.CSS is fantastic. It’s simple, it’s constantly reinventing itself, it makes sense, and it’s really really fun!
The second example you give, does not what you say it does. It first checks it a
DIVelement is not aPelement (this is always true, so allDIVelements will be returned). Then you get all adjacentEMelements. You could simply writediv emto achieve a similar effect.The fourth example is even invalid CSS3, because the
:notselector requires -as you said- a simple selector between the brackets. A pseudo-element is not (part of a) simple selector.When I first saw the
:notselector in the list of selectors, I thought you could write a full CSS selector between the brackets. I think that would make sense, and while writing a PHP XML CSS Selector Class, I noticed it was not very difficult to implement at all.[...] selector […] as an argument. It represents an element that is not represented by the argument. – The CSS3 :not selector. Tagged code, [...]
Arjan, You are right about the first. Wierd, because in a previous version of the CSS I used it and it worked (
.first-post:not(blockquote) p:first-line, for the quote on the homepage.) – must be something else that caused that. I have changed the article accordingly.On the second bit, The fourth example appears valid. Check the specifications on simple selectors (emphasis mine):
source definition.
Kilian: You cite the part of the spec where a simple selector is defined. But when you look at the part where the
:notpseudo-class is defined, you’ll see this:source
You are right, the CSS :
not()definition states that you can’t add a pseudo-element. I read over that. I’ve changed the article accordingly, thanks! :)[...] The CSS3 :not() selector – Noch so ein CSS3-Feature an das man sich gewöhnen [...]
[...] un selector del que no se ha hablado mucho y que realmente dará mucho juego en un futuro. Este selector, nos permite negar las búsquedas que [...]
[...] Kilian Valkhof – The CSS3 :not() selector [...]
Hello!
I found that
div *:not(p) em {…}
will not work, because arguments of :not() cannot contain descendant of selectors. It only can contain the classes and psevdo-classes of selector you wrote (div). Plese check it out in your article.
[...] información | Kilian (En [...]
h2:not(#foo, #bar) {…}
isn’t working here
(3.2a1 pre)
Hello, I have found the :not() selector particularly useful when creating custom user styles for other websites, e.g. for Stylish (extension for FF). Because some elements are not id’d or class’d completely or not the way you want them to.
This selector gives you a great chance to apply styles for certain elements, but not for specific other elements.
~HKK
[...] The CSS3 :not() selector – Kilian Valkhof [...]
Nice! I added this snippet to AdSweep:
iframe[name*="google"]:not([name="googleSearchFrame"])
It hides all iframes that have “google” in their names but that aren’t search results :)
[...] The negation pseudo-class,:notX, is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument. – The CSS3 :not selector. [...]
You can stack :not() with other pseudo-selectors like :hover:
li:not(.active):hover
I was always unhappy with rollover menus and this provided a fix! Thanks for the article!
[...] The CSS3 :not() selectorThere isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
[...] The CSS3 :not() selectorThere isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
[...] The CSS3 :not() selectorThere isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
[...] The CSS3 :not() selectorThere isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
[...] The CSS3 :not() selector There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
[...] The CSS3 :not() selector [...]
[...] The CSS3 :not() selector [...]
[...] The CSS3 :not() selector [...]
[...] 19.) The CSS3 :not() selector [...]
[...] 19.) The CSS3 :not() selector [...]
[...] http://www.gesteves.com/experiments/starwars.html http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/ http://webtint.net/tutorials/the-mysterious-pseudo-class-in-css/ [...]
It should probably be noted that Firefox (3.6.3) doesn’t support attribute selectors inside the `:not()` negation pseudo-class just yet.
[...] 19.) The CSS3 :not() selector [...]
[...] The CSS3 :not() selector [...]
[...] The CSS3 :not() selector There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do! [...]
Your response?
If you post code examples, make sure to escape your HTML.