A Look into: CSS3 Negation (:NOT) Selector
CSS has some selectors that allow you to select elements in certain conditions such as :hover
, :focus
, :active
, etc. Yet today we will not cover those selectors. We will look into one which is still a little known method but used by most web designers – that is the :not
selector or also known as negation selector.
What does it do?
I’m sure that the :not
name itself has already described its function, that it will simply select the opposite of the element or condition specified. For example:
This syntax will select any element other than p
(paragraph).
:not(p)
While the example syntax below will select the div
element that does not have class abc
div:not(.abc)
All right, now, let’s try this selector in a real example:
First of all, let’s make a few paragraphs with a few links from Wikipedia and a few links with fictional domains. Here is the HTML markup for the paragraph.
<article> <h1>The CSS :not Selector Demo</h1> <p>Jujubes applicake sesame snaps chupa chups <a href="http://www.thisisnotwikipedia.com/">chocolate cake</a>. Oat cake marshmallow wypas toffee donut cake. Chupa chups jelly cupcake gummi bears. Lemon drops cake wafer.</p> <p><a href="http://en.wikipedia.org/wiki/Cheesecake">Cheesecake chocolate cake donut</a> jelly sweet roll powder soufflÃÂé chocolate cake. Wypas cotton candy lemon drops cookie candy donut bonbon marzipan. Macaroon candy liquorice jelly-o. Chocolate pie sweet roll candy <a href="http://en.wikipedia.org/wiki/Marshmallow">marshmallow</a> dragÃÂée cotton candy brownie marshmallow.</p> <p>Pudding topping marshmallow bear claw. Pie muffin pastry gummies <a href="http://www.exampledomain.com">fruitcake brownie</a> jelly gingerbread sesame snaps. Candy pudding cupcake bear claw. Carrot cake muffin cotton candy tootsie roll muffin. Jelly beans tart dragÃÂée sweet icing <a href="http://en.wikipedia.org/wiki/Chocolate_bar">wafer topping chocolate bar</a>. Sweet roll toffee sugar plum pastry drage <a href="http://www.somename.co/">bonbon candy muffin</a>.</p> <p><a href="http://en.wikipedia.org/wiki/Pastry">Cake marzipan applicake pastry</a> wypas fruitcake. Oat cake chocolate wypas dragÃÂée sugar plum carrot cake icing. Caramels chocolate bar croissant wafer cupcake pie jujubes chocolate bar. Biscuit candy canes dragÃÂée.Candy brownie oat cake sesame snaps cheesecake powder tootsie roll biscuit bear claw. SoufflÃÂé gummi bears jelly beans sesame snaps faworki <a href="http://en.wikipedia.org/wiki/Dessert">cookie dessert sweet bonbon</a>.</p> </article>
The plan here is: we will select only the links that is not pointing to Wikipedia and then give those links an exclamation mark to alert attention towards those links.
First, we will add an :after
pseudo-element on all the links to place the mark, and we define it as an inline-block
element.
a:after { display: inline-block; }
Then, to select every link that is not pointing to Wikipedia, we will combine the :not
selector with an attribute selector. The attribute selector here will select every anchor tag in which the href attribute begins with http://en.wikipedia.org/
and by combining it with the :not
, it will obviously select the opposite. So here we go:
a:not([href^="http://en.wikipedia.org/"]):after { background-color: #F8EEBD; border: 1px solid #EEC56D; border-radius: 3px 3px 3px 3px; color: #B0811E; content: "!"; font-size: 10pt; margin-left: 5px; padding: 1px 6px; position: relative; }
It works! The anchor tags that do not point to Wikipedia now has an exclamation mark.
Chrome Bug
If you view this in Chrome, you’ll notice that the rendered effect is not as the above. All the links appear to have an exclamation mark regardless of the URL.
This case has actually been addressed as a bug. So, to fix this bug, we need to add this rule.
a[href^="http://en.wikipedia.org/"] /*Chrome Hack*/ { display: inline-block; }
And now the problem should have been fixed.
Conclusion
In some circumstances using the :not
selector is really the most effective option, just like the above example, where we are able to select some random elements without even adding an unnecessary class or additional markup to the document.
You can actually further build great effects by utilizing this selector, and this is one example: Filter Functionality with CSS3