As a web developer, you know that CSS is one of the most powerful tools in your toolbox. With CSS, you can style your web pages to look exactly how you want them to, and create a seamless user experience for your visitors. But sometimes, your CSS selectors can end up selecting more elements than you intended. That’s where the CSS not selector comes in.
The CSS not selector, denoted by the :not() pseudo-class, allows you to exclude specific elements from your CSS selectors. This can be incredibly useful when you want to target only certain elements and avoid accidentally styling others. In this tutorial, we’ll show you how to use the not selector to make your CSS more efficient and flexible.
To start, let’s take a look at the basic syntax of the not selector. Here’s an example:
p:not(.highlight) {
color: blue;
}
In this example, we’re targeting all p elements that do not have the class highlight and setting their color to blue. This means that any p elements with the highlight class will not be affected by this rule.
But what if we want to exclude multiple elements from our selector? That’s easy – just separate them with commas:
p:not(.highlight, .intro) {
color: blue;
}
In this example, we’re excluding both elements with the highlight class and elements with the intro class from our selector.
Now that you know the basics of the not selector, let’s take a look at a real-world example. Suppose you have a website with a navigation bar, and you want to style all links in the navigation bar except for the current page. You could use the not selector to exclude the link for the current page:
.nav-link:not(.current) {
color: blue;
}
In this example, we’re targeting all a elements with the class nav-link that do not have the class current and setting their color to blue. This means that the link for the current page will not be affected by this rule.
By using the not selector, you can make your CSS more efficient and flexible. Instead of writing long, complex selectors that target specific elements, you can use the not selector to exclude the elements you don’t want to style. This makes your code easier to read and maintain, and can save you time and effort in the long run.
So, give the CSS not selector a try in your next project. Follow our step-by-step guide and examples to master this powerful selector and take your CSS skills to the next level.
CSS NOT selector video tutorial on YouTube
If you want to learn more the check out my CSS not() Tutorial on YouTube.
The source code for the tutorial, copy and paste the code in your code editor.
HTML for CSS Not
<body>
<nav class="nav-bar">
<ul class="nav-items">
<li class="nav-item"><a class="nav-link" href="">Home</a></li>
<li class="nav-item"><a class="nav-link" href="">Course</a></li>
<li class="nav-item"><a class="nav-link" href="">About</a></li>
<li class="nav-item"><a class="nav-link" href="">Contact</a></li>
</ul>
</nav>
<h1>CSS <span>:not()</span></h1>
<h2 class="subtitle">CSS <span>pseudo-class</span></h2>
<main>
<article>
<h2 class="subtitle">Title</h2>
<p class="highlight">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
<article>
<h2 class="subtitle">Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius
doloribus consequuntur itaque odio voluptates aliquam fugit ea tempore
sapiente possimus?
</p>
</article>
</main>
<footer>@copy <a href="https://norbertbm.com">Norbert BM</a></footer>
<script src="app.js"></script>
</body>CSS code for CSS Not
* {
margin: 0;
padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.nav-bar {
height: 80px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.nav-items {
list-style: none;
display: flex;
justify-content: space-between;
font-size: 28px;
}
.nav-item {
margin: 0 1rem;
}
h1 {
margin: 2rem;
font-size: 64px;
text-align: center;
}
main {
max-width: 950px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 35px;
margin: 4rem auto;
}
.highlight {
font-weight: 500;
}
p {
width: 250px;
}
footer {
position: fixed;
bottom: 0;
height: 80px;
width: 100%;
background-color: #494949;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}JavaScript code for CSS Not
function toggleHighlight() {
const paragraphs = document.querySelectorAll("article p");
const randomIndex = Math.floor(Math.random() * paragraphs.length);
paragraphs.forEach((paragraph, index) => {
if (index === randomIndex) {
paragraph.classList.toggle("highlight");
} else {
paragraph.classList.remove("highlight");
}
});
}
setInterval(toggleHighlight, 2000);h2:not(.subtitle) {
text-align: center;
}
span:not(h2 > span) {
color: gray;
}
/* li:not(:first-child):not(:last-child) {
font-weight: bolder;
} */
/* or */
li:not(:first-child, :last-child) {
font-weight: bolder;
}
a:not([href^="https"]) {
color: white;
}
.subtitle:not(article > .subtitle) {
color: black;
text-align: center;
margin-bottom: 4rem;
}
.subtitle > span:not(article > .subtitle) {
color: red;
opacity: 0.5;
}
Want to become a web developer ?
Get complete web development courses on HTML, CSS , JavaScript, Bootstrap, Visual Studio Code, Responsive design and much more…