CSS3 :notSelectors

Complete CSS Selector Reference Manual

---

Definition and Usage

The :not(selector) selector matches every element that is not the specified element/selector.

CSS's :not pseudo-class allows you to select all elements except the specified selector. This is a way to apply styles by excluding specific elements.

Basic Syntax

css
:not(selector) {
  /* 样式规则 */
}

• selector: This is the selector you want to exclude.

1. Exclude elements of a specific type

body :not(p) {
  color: blue;
}

This code will set the text color to blue for all elements inside the body element except p elements.

2. Exclude elements with a specific class

div :not(.highlight) {
  background-color: gray;
}

This code will set the background color to gray for all elements within a div element that do not have the highlight class.

3. Exclude multiple selectors

:not(div, span) {
  font-size: 14px;
}

This code will set the font size to 14 pixels for all elements on the page that are neither div nor span.

4. Exclude pseudo-classes

a:not(:hover) {
  color: black;
}

This code will set the text color to black for all links that are not in a hover state.

5. Exclude attribute selectors

input:not([type="text"]) {
  border: none;
}

This code will remove the border from all input elements that are not type="text".

Note

• :notPseudo-classes are part of CSS3 selectors and are widely supported by browsers.
• :notPseudo-classes can improve the flexibility of CSS code, allowing you to control the application of styles more precisely.
• You can:notIn pseudo-classes, use a single selector or multiple selectors separated by commas.

---

Browser Support

The numbers in the table indicate the version number of the first browser that supports the selector.

Selectors
:not()	4.0	9.0	3.5	3.2	9.6

---

Complete CSS Selector Reference Manual

other extensions