CSS Not Selector
CSS Not Selector
In CSS, the not pseudo-class selector is a very useful tool that helps us select elements other than the specified element. With the not selector, we can more precisely control the styles on the page, making our pages more flexible and beautiful.
Basic Syntax
not The basic syntax of the selector is as follows:
:not(selector) {
/* styles */
}
Where selector is the selector of the element to be excluded. Below, we’ll use some examples to explain the usage of the not selector in detail.
Sample Code
Example 1: Excluding Elements with a Specific Class Name
<!DOCTYPE html>
<html Tutorial">html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
.container:not(.exclude) {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
This is a container.
</div>
<div class="container exclude">
This is an excluded container.
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude elements with the exclude class name, so that only elements without the exclude class name have a background color applied.
Example 2: Exclude elements with specific IDs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(#exclude) {
color: red;
}
</style>
</head>
<body>
<div id="exclude">
This is an excluded div.
</div>
<div>
This is a normal div. </div>
</body>
</html>
Output:
In this example, we use the not selector to exclude elements with the exclude ID, resulting in only elements without the exclude ID having red text color applied.
Example 3: Exclude specific element types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(.exclude) {
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<div class="exclude">
This is an excluded div.
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude div elements with the exclude class name, so that only p elements have a 20px font size applied.
Example 4: Exclude multiple selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(.exclude, #exclude) {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="exclude">
This is an excluded div.
</div>
<div id="exclude">
This is another excluded div. </div>
<div>
This is a normal div.
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude elements with the exclude class name or the exclude ID, resulting in only elements without these selectors having a light green background.
Example 5: Exclude descendant elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(.container .exclude) {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="exclude">
This is an excluded div.
</div>
<div>
This is a normal div.
</div>
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude descendant elements of .container.exclude, so that only div elements without this descendant element have a black border applied.
Example 6: Exclude elements with specific attribute values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
a:not([href="https://geek-docs.com"]) {
color: blue;
}
</style>
</head>
<body>
Geek Docs
Example
</body>
</html>
Output:
In this example, we use the not selector to exclude a elements whose href attribute value is https://geek-docs.com. This results in a blue text color for a elements only.
Example 7: Exclude elements of specific pseudo-classes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(:first-child) {
font-weight: bold;
}
</style>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
Output:
In this example, we use the not selector to exclude the first child of the p element, so that only the p elements that are not the first child have the bold text style applied.
Example 8: Exclude elements in a specific state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
input:not(:disabled) {
background-color: lightgray;
}
</style>
</head>
<body>
<input type="text" disabled>
<input type="text">
</body>
</html>
Output:
In this example, we use the not selector to exclude input elements in the disabled state, so that only non-disabled input elements have a light gray background.
Example 9: Exclude elements of specific sub-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
ul:not(:empty) {
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul> <ul></ul>
</body>
</html>
Output:
In this example, we use the not selector to exclude empty ul elements, so that only non-empty ul elements have a black border applied.
Example 10: Exclude elements with specific attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
img:not([alt]) {
border: 1px solid red;
}
</style>
</head>
<body>
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg" alt="Image">
<img src="https://coder-cafe.com/wp-content/uploads/2025/09/image.jpg">
</body>
</html>
Output:
In this example, we use the not selector to exclude img elements that have an alt attribute. This results in only img elements without an alt attribute having a red border applied.
Example 11: Exclude elements with specific text content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
p:not(:contains("geek-docs.com")) {
color: green;
}
</style>
</head>
<body>
<p>Welcome to geek-docs.com</p>
<p>Welcome to our website</p>
</body>
</html>
Output:
In this example, we use the not selector to exclude p elements that contain the text content geek-docs.com. This results in only p elements that do not contain this text content having the green text color applied.
Example 12: Exclude elements with a specific number of child elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(:nth-child(2)) {
background-color: lightyellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
</div>
<div>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude the div element that is not the second child of the div element, so that only the div element that is not the second child of the div element has a light yellow background.
Example 13: Exclude elements in a specific state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
button:not(:hover) {
background-color: lightblue;
}
</style>
</head>
<body>
<button>Hover over me</button>
</body>
</html>
Output:
In this example, we use the not selector to exclude the button element from the hover state, so that only the button element that is not hovered has the light blue background applied.
Example 14: Exclude elements of specific sub-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
ul:not(:first-of-type) {
color: purple;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
</ol>
</body>
</html>
Output:
In this example, we use the not selector to exclude the first type of ul element, so that only the ul elements that are not the first type have the purple text color applied.
Example 15: Exclude elements of specific sub-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Selector Example</title>
<style>
div:not(:last-of-type) {
font-style: italic;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1</p>
</div>
<div>
<p>Paragraph 2</p> <p>Paragraph 3</p>
</div>
</body>
</html>
Output:
In this example, we use the not selector to exclude the last type of div element, so that only the div elements that are not the last type of div element are italicized.
Conclusion
Through the above examples, we have detailed the use of the not selector in CSS. The not selector can help us exclude specific elements, giving us more precise control over the styles on the page.