:not()
Matches elements that do not match any of the selectors in the brackets.
Syntax
selector:not(list) { … }Parameters
| Parameter | Type | Description |
|---|---|---|
| list | selectors | One or more selectors separated by commas. |
Examples
A divider for every item except the last; bold for unfinished tasks:
<style>
li:not(:last-child) { margin-bottom: 8px; border-bottom: 1px dashed gray; }
li:not(.done) { font-weight: bold; }
</style>
<ul>
<li class="done">Buy bread</li>
<li>Call Anna</li>
<li>Pay $25 rent</li>
</ul>Notes
The specificity of :not() equals that of the most specific selector inside it. A bare :not(.x) without a tag also matches <html> and <body>, so add a type or class before it.
See also
- :is() — Matches an element that matches any selector in the list — a way to shorten long selector lists.
- :has() — Matches an element that contains something matching the selector in brackets — the "parent selector".
- :last-child — Matches an element that is the last child of its parent.
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.