CSS Selector to Select Elements Not Having Certain Class / Attribute / Type

CSS Web Development Front End Technology

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.

Example

The following examples illustrate CSS :not pseudo-class.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: cornflowerblue;
   color: white;
}
p:not(div>p) {
   background-color: khaki;
   font-size: 1.4em;
   font-style: italic;
   color: blue;
}
</style>
</head>
<body>
<div>
<p>Curabitur sapien diam, imperdiet ut est sed, blandit blandit velit. Nunc viverra nunc id ligula ultricies, a fringilla lacus interdum. <span>Sed vel diam at magna pellentesque porttitor.</span>
</p>
<h3>Demo</h3>
</div>
<p> Ut rutrum sapien sit amet sapien lacinia, at ullamcorper felis lobortis. Praesent dignissim vel turpis nec ultricies.</p>
</body>
</html>

Output

This will produce the following result −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 2%;
   background-color: cadetblue;
   padding: 10%;
   height: 80px;
}
div:not(.parent) {
   box-shadow: inset 0 0 24px tomato;
   padding: 2%;
}
.parent{
   border: 4px ridge orange;
}
.one {
   background-color: lightgreen;
   border: 4px groove gray;
}
.two{
   height: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">
<div class="two"></div>
<div class="two"></div>
</div>
<div class="one"></div>
</div>
</body>
</html>