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