CSS :not Selector

Subscribe Our Channel

Course Topics

Courses

The CSS :not Selector is a powerful tool that allows developers to select elements that do not match a specified criteria. It is used in conjunction with the standard CSS selectors, such as class, ID, and tag selectors. By using the :not() pseudo-class, developers can easily target elements that do not meet a certain condition, rather than specifying each element individually.

For example, if a developer wants to select all paragraphs except those with the class “highlight”, they can use the following code: `p:not(.highlight) {…}`. This saves time and effort compared to selecting all paragraphs and then removing the ones with the “highlight” class one by one.

The :not selector is an essential tool in CSS for creating cleaner and more efficient stylesheets, and it can be used in a variety of ways to target specific elements and improve the design and functionality of a website.

Definition and Usage

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

CSS Syntax

:not(selector) {
  css declarations;
}

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #000000;
}

:not(p) {
  color: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some text in a div element.</div>

<a href="https://www.w3syllabus.com" target="_blank">Link to W3Syllabus!</a>

</body>
</html>

Buy This Course Share Report Abuse 678 Print