Categories
Web development

CSS :not Selector

CSS :not selector

CSS :not selector

The CSS :not selector selects every element that is not the specified element.

Syntax:

:not(selector) {
  CSS declarations;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  color: #2a9d8f;
}

:not(h4) {
  color: #e76f51;
  font-weight: bold;
}
</style>
</head>
<body>

<h4>This is a heading.</h4>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h4>This is another heading.</h4>
<div>This is some text in a div element.</div>

</body>
</html>

Output:

This is a heading.

This is a paragraph.

This is another paragraph.

This is another heading.

This is some text in a div element.

Enjoy coding!