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'>
    <meta charset='utf-8'>
    <title>Quick contact form</title>
        input:not([type='submit']) {
            border:1px solid greenyellow;
        <legend>Contact information</legend>
                <label for='email'>Email:</label>
                <input required type='email' id='email' name='email'/>
                <label for='tel'>Telephone number:</label>
                <input required type='tel' id='tel' name='tel'/>
                <label for='url'>Website:</label>
                <input required type='url' id='url' name='url'/>
        <input type='submit' value='Submit this' />

Series Navigation<< CSS3 Selectors: Pseudo-element ::after