Understanding the CSS3 :not Selector

series_html5css3]

:hover, :focus, and :active are just a few of the selectors CSS offers to target elements under specific conditions. However, today’s focus is on a lesser-known, yet widely utilized tool among web designers – the :not selector, also known as the negation selector.

The :not selector, as the name suggests, targets the inverse of the specified element or condition.

For instance, to target any element except p (paragraph), use the following syntax:

 :not(p)
 

Alternatively, to select a div element that does not carry the class abc, use this syntax:

 div:not(.abc)
 

Let’s apply the :not selector in a practical example:

We’ll start with a few paragraphs containing links from Wikipedia and some fictional domains. Below is the HTML markup for our example.

    <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 goal is to highlight links that don’t lead to Wikipedia by marking them with an exclamation mark. This draws attention to these particular links.

First, we’ll use the :after pseudo-element on all links to add the mark, setting it as an inline-block element.

 a:after {
 display: inline-block; 
 }

Next, to specifically target links not directed to Wikipedia, we’ll use the :not selector together with an attribute selector. This combination will select anchor tags where the href attribute does not start with http://en.wikipedia.org/. Here’s how it’s done:

    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;
    }

This method successfully adds an exclamation mark to non-Wikipedia links.

Noting a Chrome Quirk

In Chrome, you might see every link marked with an exclamation, contrary to what’s expected. This discrepancy has been recognized as a bug.

To address this issue, include the following rule:

    a[href^="http://en.wikipedia.org/"] /*Chrome Hack*/ {
        display: inline-block;
    }

This adjustment resolves the problem.

Wrapping Up

The :not selector proves incredibly useful in certain scenarios, like the one demonstrated. It allows for the selection of specific elements without the need for additional classes or markup. This selector opens the door to many creative possibilities, such as creating filter effects, as showcased in Filter Functionality with CSS3.