Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS Selector to Select Elements Not Having Certain Class / Attribute / Type
Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector.
Syntax
selector:not(selector) {
property: value;
}
Select Elements Not Having a Child Selector
To select elements not having a child selector, use the :not pseudo-class in CSS.
Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the <p> elements that are children of <div> i.e.
div > p
But we have selected elements not having this div > p −
p:not(div > p) {
background-color: orange;
font-size: 1.4em;
font-style: italic;
color: blue;
}
Example
The following example illustrates CSS :not pseudo-class −
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: cornflowerblue;
color: white;
padding: 10px;
margin: 10px;
}
p:not(div > p) {
background-color: orange;
font-size: 1.4em;
font-style: italic;
color: blue;
}
</style>
</head>
<body>
<div>
<p>This paragraph is inside a div element</p>
<h3>Demo</h3>
</div>
<p>This paragraph is not inside a div element</p>
</body>
</html>
The first paragraph inside the div has cornflowerblue background with white text. The second paragraph outside the div has orange background with italic blue text and larger font size.
Select Elements Not Having a Certain Class
We will select elements not having a certain class using the :not selector as shown below −
div:not(.parent) {
box-shadow: inset 0 0 24px tomato;
padding: 2%;
}
Example
Let us see an example to select elements not having a certain class −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
background-color: cadetblue;
padding: 20px;
min-height: 80px;
}
div:not(.parent) {
box-shadow: inset 0 0 24px blue;
padding: 10px;
}
.parent {
border: 8px ridge orange;
color: white;
background-color: darkslateblue;
}
.one {
background-color: lightgreen;
border: 4px groove gray;
color: black;
}
.two {
min-height: 20px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">Parent div
<div class="one">Child div one
<div class="two">Nested div</div>
<div class="two">Nested div</div>
</div>
<div class="one">Child div two</div>
</div>
</body>
</html>
The parent div has an orange ridge border with dark blue background. All child divs (without .parent class) have blue inset box shadows applied. The nested divs show the :not() selector targeting elements without the specific class.
Conclusion
The CSS :not() pseudo-class is a powerful selector for excluding specific elements from styling rules. It helps create precise targeting by selecting elements that do not match certain conditions like classes, attributes, or element types.
3K+ Views
