Select all, except -CSS

Question

How do I select all but one instance of an element?

for example, my link or <a> elements have a particular color, but there's this one a element I don't want the color to to apply.

I want the link element to have the same color as the remaining text

score 1 · Answer 1 · answered Jul 08 '22 at 21:02

There is a :not selector in CSS. This will apply styles to everything, except elements that the not selector will target.

So, you could style the colors of all anchor tags except ones that you put a specific class on like:

a:not(.dontBeRed) { 
 color: red;
}

You can also target exceptions other ways. Lets say you have a few custom color utility classes, you could ignore elements that have any class with a certain prefix.

This will style all anchors red unless they have a class that starts with u-color on them.

a:not([class*='u-color']) {
    color: red; 
}

.u-color--green {
    color: green;
}
            
.u-color--blue {
    color: blue;
}

Select all, except -CSS

1 Answers1