CSS3 Selectors: Negation pseudo-class :not(s)

This entry is part 40 of 40 in the series CSS3 Selectors

Pseudo-class: not(s)

This is probably the last CSS3 selector that we will look at.

In many ways, it works in reverse to other selectors as it allows you to target elements that do not match the selector’s argument s.

An example here is in styling all form inputs that are not Submit buttons.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
    <style>
        input:not([type='submit']) {
            width:250px;
            border:1px solid greenyellow;
        }
    </style>
</head>
<body>
<form>
    <fieldset>
        <legend>Contact information</legend>
        <ul>
            <li>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
            </li>
            <li>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
            </li>
            <li>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
            </li>
        </ul>
        <input type='submit' value='Submit this' />
    </fieldset>
</form>
</body>
</html>

jQuery: not

This entry is part 31 of 33 in the series jQuery Tutorial

For not method, the supplied selector is tested against each element; the elements that don’t match the selector will be included in the result.

<!doctype html>
<html>
<head>
    <title>not demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        div {
            width: 50px;
            height: 50px;
            margin: 10px;
            float: left;
            background: yellow;
            border: 2px solid white;
        }

        .green {
            background: #8f8;
        }

        .gray {
            background: #ccc;
        }

        #blueone {
            background: #99f;
        }
    </style>
</head>
<body>

<div></div>
<div id='blueone'></div>
<div></div>
<div class='green'></div>
<div class='green'></div>
<div class='gray'></div>
<div></div>

<script>
    $('div').not('.green, #blueone')
            .css('border-color', 'red');
</script>

</body>
</html>

Post Your Gameplays

In this example, class=’green’ and id=’blueone’ will be excluded when applying the .css method.