Comments on: The CSS3 :not() selector

By: Conrad Damon

Conrad Damon — Tue, 07 Feb 2012 00:04:50 +0000

Any plans for supporting combinators? I’d like to be able to perform a selection such as “all TDs that are not descendants of a DIV with class name ‘foo’”. That request has also been framed as “turning off” styles that were selected at a more general level, so that you can revert to browser defaults.

By: BoltClock

BoltClock — Wed, 25 Jan 2012 15:23:23 +0000

This is a really old article, but I'd like to specifically address the :not() pseudo-class accepting a comma-separated list of selectors, because people are still citing it today. You're right in that it's not documented in the CSS3 spec. The reason why it works in Firefox 3 is because it's a bug. I'm not sure when the bug was fixed — it could be either in Firefox 3.1 or Firefox 3.5 — but it's still nothing but a bug in Firefox 3.0. I haven't seen any version of any other browser exhibit this bug. As a side note, the CSS working group has proposed an extension to the :not() pseudo-class in CSS4 that will let it accept a comma-separated list of simple selectors. It's probably just a matter of time before it gets implemented, but in the meantime, the current version of :not() should not accept a comma-separated selector list in any current browser.

By: Adamo Maisano

Adamo Maisano — Mon, 05 Dec 2011 20:10:37 +0000

The :not() selector is key to avoiding dishing out webfonts to certain mobile browsers that do not support them. It’s a fringe case, but all Android 2.1 browsers will not render any type of webfont. That doesn’t stop them from loading them however (and preventing the text from showing up at all until loaded), so I’ve used a UA tag in the body, “.android21,” and the body:not(.android21) rule to only send non Android 2.1 browsers the referenced name for my webfont. Android 2.1 gets the default font immediately, whether that’s set by the UA default style sheet, or a previous rule in the CSS file :)

By: DissidentRage

DissidentRage — Fri, 02 Dec 2011 15:40:46 +0000

The :not() selector is VERY handy for CSS-only menus. It allows you to add sub-menus without use of Javascript or additional blocks of CSS for each level of sub-menu.

.menu ul {
display: none;
visibility: hidden;
}
.menu li:hover ul {
display: block;
visibility: visible;
}
.menu li:hover ul li:not(:hover) ul {
display: none;
visibility: visible;
}

By: HTML 5 Details Element Enabler « WeMakeSites.NET | CSS3, HTML5, JavaScript, AJAX and More

Fri, 28 Oct 2011 19:23:49 +0000

[...] using the :not() selector we make sure that if the open attribute is added by default to the

[...]

By: How To Use CSS Combinators and Simple Pseudo Class Selectors | Van SEO Design

Mon, 19 Sep 2011 12:32:49 +0000

[...] negation pseudo-class does what you might expect. Adding it selects everything other than the selector being [...]

By: Shout

Shout — Tue, 13 Sep 2011 18:57:52 +0000

Thank you ^^

By: 60 Excellent CSS3 Tutorials and Techniques You Should Know « Dg3World

60 Excellent CSS3 Tutorials and Techniques You Should Know « Dg3World — Fri, 19 Aug 2011 21:18:55 +0000

[...] The CSS3 :not() selector [...]

By: Hello Inbox, An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.» Blog Archive » Hold The Phone – A Look at Designing for Smartphones

Wed, 29 Jun 2011 19:51:50 +0000

[...] So now what? From my research, I found a couple methods like using attribute selectors and the “div:not” property. The div:not property breaks the mobile version on the iPhone. Attribute selectors [...]

By: Nathan Wehr

Nathan Wehr — Wed, 17 Nov 2010 14:18:54 +0000

One things I’ve noticed that doesn’t seem to work is this:

div:not( div:first-child )