Is it possible to exclude elements that are not something or something else using :not()?

Question

Is it possible to exclude elements that are not something or something else using :not()?

Let the example do the talking

.cyan {
  background-color: cyan;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}

li:not(.yellow), li:not(.green) {
  color: white;
}

<ul>
  <li class="cyan">red</li>
  <li class="red">red</li>
  <li class="green">green</li>
  <li class="blue">blue</li>
  <li class="yellow">yellow</li>
</ul>

I want to keep cyan and yellow as they are. I am aware of other methods, but that's not what I'm looking for.

I wish to apply :not(.yellow or .green)

css

Answer 1

Answer №1

To create a series of negation selectors using :not, you can chain them together like this:

.purple {
  background-color: purple;
}
.orange {
  background-color: orange;
}
.pink {
  background-color: pink;
}
.brown {
  background-color: brown;
}
.grey {
  background-color: grey;
}

li:not(.grey):not(.pink) {
  color: black;
}

<ul>
  <li class="purple">purple</li>
  <li class="orange">orange</li>
  <li class="pink">pink</li>
  <li class="brown">brown</li>
  <li class="grey">grey</li>
</ul>

Answer 2

To create a series of negation selectors using :not, you can chain them together like this:

.purple {
  background-color: purple;
}
.orange {
  background-color: orange;
}
.pink {
  background-color: pink;
}
.brown {
  background-color: brown;
}
.grey {
  background-color: grey;
}

li:not(.grey):not(.pink) {
  color: black;
}

<ul>
  <li class="purple">purple</li>
  <li class="orange">orange</li>
  <li class="pink">pink</li>
  <li class="brown">brown</li>
  <li class="grey">grey</li>
</ul>

Answer 3

Answer №2

Here's the solution for you

li:not(.yellow):not(.green) {
  color: white;
}

Answer 4

Here's the solution for you

li:not(.yellow):not(.green) {
  color: white;
}

Answer 5

Answer №3

.teal {
  background-color: teal;
}
.pink {
  background-color: pink;
}
.orange {
  background-color: orange;
}
.purple {
  background-color: purple;
}
.gray {
  background-color: gray;
}

li:not(.gray):not(.purple) {
color: black;
}

<ul>
  <li class="teal">pink</li>
  <li class="pink">pink</li>
  <li class="orange">orange</li>
  <li class="purple">purple</li>
  <li class="gray">gray</li>
</ul>

Answer 6

.teal {
  background-color: teal;
}
.pink {
  background-color: pink;
}
.orange {
  background-color: orange;
}
.purple {
  background-color: purple;
}
.gray {
  background-color: gray;
}

li:not(.gray):not(.purple) {
color: black;
}

<ul>
  <li class="teal">pink</li>
  <li class="pink">pink</li>
  <li class="orange">orange</li>
  <li class="purple">purple</li>
  <li class="gray">gray</li>
</ul>

Is it possible to exclude elements that are not something or something else using :not()?

Answer №1

Answer №2

Answer №3

Similar questions

Using the columns property in CSS3 along with background-color

Adjusting the width of a select box to match the size of its child table using CSS

Disappearance of icon upon hovering in CSS

Disappear Image Overlay when Mouse Hovers

Issue with the react-native-autocomplete-input where the list does not close after selecting an option

menu featuring a creative favicon and an accompanying label

Using Foreach with Bootstrap to display a grid of 6 column items with images

Tips for altering text size within Angular Material form fields with floating placeholder

Just a single page on my website extends beyond the footer's reach

What are the steps to create a customized app bar with React and Material-UI similar to this design?

Tips for implementing a sliding list feature with next and previous buttons:

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a left and right margin when incorporating Bootstrap grid?

Get rid of the rollover effect on the <a> tag when hovering over an image

Steps to modify the background-color of an iFrame using CSS

How can I detect a DOM element mutation based on a CSS selector, and if this is possible, how can it be accomplished?

What is the best way to display two items side by side from a list of items in HTML?

Setting maximum and minimum zoom limits for an element ID using JavaScript or jQuery

A slender gap of white space delicately separates the transformed parent from its offspring

Utilizing jQuery to generate dynamic nested divs within the ul li tags