Using the : not pseudo selector

HTML & CSS
1

Hello,

I have the following code that makes the masthead sticky:

.page-id-2 #masthead {
    z-index: 100;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    padding-top: 35px;}

At first I applied it to a few pages and it worked fine. Now I would like to use it on most pages and thought that the :not pseudo selector would work to exclude some pages, as such:

:not(.page-id-1 #masthead) {
    z-index: 100;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    padding-top: 35px;}

It’s not working. Perhaps my syntax is wrong. Perhaps :not doesn’t work with pages.

Thanks

2

You can only have a simple selector inside the not selector. You cant use descendant selectors inside it.

What’s wrong with just saying:

. page-id-1 #masthead{position:static}

Or whatever it is you wanted?

4 Likes
3

Thanks

Your simple solution is the best. I just make sure that I list those special pages after the general requirement.

4

In general, :not would be used as an excluder from a broader grouping.

p:not(:last-of-type) (“All Paragraphs, EXCEPT the last one.”)

body > div:not(.page-id-1) (“All direct descendant divs in the top level of the body, EXCEPT the one(s) with class page-id-1”)

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.