CSS: How to select all links ( a ) that do not have a certain class?

Question

So I have a navbar with several links inside of it. If the width of the screen gets too small, all of those links disappear and a hamburger menu icon appears, which is also a link, but it has the class "hamburger". How would I make a selector in CSS that would select all of the links except from that hamburger menu link?

Here is my CSS:

@media only screen and (min-width: 601px) {
    /* hide the hamburger */
    .hamburger {
        display: none;
    }
    /* show all the nav-buttons */
    .navbar a {
        display: block;
    }
}


/* if browser window is small (max-width) */

@media only screen and (max-width: 600px) {
    /* show everything with the hamburger class */
    .hamburger {
        display: block;
    }
    /* hide all the nav-buttons */
    .navbar a {
        display: none;
    }
}

`a:not(.hamburger)` [:not()](https://css-tricks.com/almanac/selectors/n/not/) — zer00ne, May 29 '22 at 01:19
Hi.is hamburger class your hamburger icons class or all links? — Hazrat Gafulov, May 29 '22 at 01:29

score 2 · Accepted Answer · answered May 29 '22 at 01:37

You need to use the pseudo class not() as per the MDN docs not() CSS psuedo class

The not() pseudo class requires a comma-separated list of one or more selectors as its argument (i.e. what goes inside the brackets).

In your example where you want all of the links except the one with the class .hamburger it would be:

a:not(.hamburger)

score 1 · Answer 2 · answered May 29 '22 at 01:39

You can use a CSS pseudo-class, specifically the :not() selector, to select elements that do not match the hamburger class.

Assuming that .hamburger is a class nested of another called .navbar:

.navbar a:not(.hamburger) {
    /* your code */
}

This will select all <a> tags except those containing the .hamburger class.

CSS: How to select all links ( a ) that do not have a certain class?

2 Answers2