<h1>CSS <code>:not()</code> pseudo-class</h1>
<p>The <code>:not()</code> pseudo-class is also known as the negation pseudo-class.</p>
<p>It’s useful to exclude elements from a particular selection.</p>
<div class="flex-ctnr">
<ul class="ex1">
<li class="first-item">Example 1</li>
<li>All text is red, except the <code><li></code> with the class <code>.first-item</code></li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul class="ex2">
<li class="first-item">Example 2</li>
<li>All elements will have <strong>black text</strong> and <strong>orange background</strong>, except the <code><li></code> with the class <code>.first-item</code> and the last <code><li></code> of the list</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
//1. All text is red, except the <li> with the class .first-item
.ex1 li:not(.first-item) {
color: red;
}
//2. All elements will have black text and a yellow background, except the <li> with the class .first-item and the last <li> of the list
.ex2 li:not(.first-item):not(:last-of-type) {
background: orange;
color: black;
}
//Styling stuff not needed for demo
h1 {
text-transform: none;
border-bottom: #636363 1px dotted;
code {
display: inline-block;
margin-bottom: 10px;
color: $y;
background: none;
box-shadow: none;
}
}
ul {
width: 400px;
margin: 40px auto 0;
padding: 20px 20px 10px 50px;
border-radius: 2px;
text-align: left;
font-size: 22px;
background: rgba(black,.2);
color: $b;
}
.ex2 {
code { color: #333; }
li { border-radius: 2px; }
}
li { padding: 5px; margin: 0 0 5px; }
code { font-size: .8em; }
.flex-ctnr {
display: flex;
flex-wrap: wrap;
max-width: 900px;
margin: auto;
}
View Compiled
This Pen doesn't use any external JavaScript resources.