I have the following code snippet applied to my site:
#page-wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
.site-header {
flex: 0 1 auto;
}
.panel-row-style {
flex: 1 1 auto;
}
.site-footer {
flex: 0 0 0px;
}
It works pretty well but I don’t want it applied to page 46. I’ve tried using the :not pseudo class but without success so far. My syntax is probably wrong. What is the correct syntax, please? Thanks.
How do you identify page 46? How will your CSS know which is page 46?
That is probably part of my syntax question. I’ve tried:
#pg-46
#pg-46-0
.page-id-46
.pg-id-46
and probably more.
Thanks.
All of those are different, and depend on what your HTML looks like. What does the HTML for page 46 look like?
(Most likely, we only want the top-level sort of HTML stuff, up to and including the header/footer. Or a link would work.)
The link is: www.maatjesalmere.nl/maatjes
Thanks
and…how do i get to page 46? I can’t see any obvious multi-page thing here.
I notice in the page that you linked to you have a class of page-id-46 in the body tag.
e.g.
<body data-rsssl=1 class="page-template-default page page-id-46 cookies-not-set siteorigin-panels siteorigin-panels-before-js responsive layout-full no-js has-sidebar page-layout-default page-layout-no-masthead-margin page-layout-no-footer-margin page-layout-hide-footer-widgets sidebar-position-none mobilenav responsive-menu-slide-right">
Assuming that this is the page you are concerned with then you could modify the css so that it doesn’t apply to that specific page like so:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body:not(.page-id-46) #page-wrapper {
background:red;
}
</style>
</head>
<body class="page-id-46">
<div id="page-wrapper">
<p>testing</p>
</div>
</body>
</html>
If you test the above and remove that class from the body you will see that the styles get applied.
Of course you’d need to add the :not selector to all the other rules you mentioned in the same way as shown above.
Alternatively you could rewrite the rules for that page using the new class.
e.g.
.page-id-46 #page-wrapper {
display:block;height:auto;/* for example*/
}
and so on…
also holy classlist batman… can none of those be combined or removed?
That is the html for page 46.
Then my answer should do what you want 
Here is the code I entered:
body:not(.page-id-46) #page-wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
body:not(.page-id-46) .site-header {
flex: 0 1 auto;
}
body:not(.page-id-46) .panel-row-style {
flex: 1 1 auto;
}
body:not(.page-id-46) .site-footer {
flex: 0 0 0px;
}
and it works, yeah. Thank you.
I’m not sure why it works because it doesn’t seem to follow recommended syntax. Why did you attach the :not to the body?
It follows the syntax perfectly.
The class that you are avoiding is attached to the body element so you are saying that when the body does not have that class applied then process the following rule for the page wrapper.
My general rule of thumb is to read : as ‘but also’. . as ‘class’, and # as ‘ID’ (a space is generally ‘with child’)
As in
“Body, but also not class page-id-46”
span:last-child
“Span, but also the last child”
a:last-of-type
“Link, but also the last of its type”
Are you saying that the class you want to avoid needs to be connected to its parent with :not? In this case, body is the parent of the page class.
no, body is a member of the page class.
:Not quite
The class you are avoiding is the starting point for your selection because that’s where it has been placed. You have to work downwards from there to find the matching descendant selector (#page-wrapper),
The body has a class of .page-id-46 and you want to target a descendant of the body if the body doesn’t have that class.
It’s sort of the reverse of using that body class to target an element.
e.g.
The normal way to target a descendant element based on a parent class.
.page-id-46 #page-wrapper {
display:block;height:auto;/* for example*/
}
When you use :not you are saying only apply the styles if this class is not present on a parent.
:not(.page-id-46) #page-wrapper {
background:red;
}
#page-wrapper is the element that you apply your styles to so you can’t add :not to page-wrapper because there is no such class on page wrapper.
It would be different if your page-id-46 class was added to page-wrapper instead of the body.
<div id="page-wrapper" class="page-id-46">
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#page-wrapper:not(.page-id-46) {
background:red;
}
</style>
</head>
<body>
<div id="page-wrapper" class="page-id-46">
<p>testing</p>
</div>
</body>
</html>
CSS works from the top down so you can’t say #page-wrapper:not(class on the body element) even if that was valid. What you say is :not class on the body then choose the descendant to style which in your case would be #page-wrapper.
(hence the C… Cascading Style Sheets.)
Thanks.
Curiously, both of these codings work fine:
body:not(.page-id-46) #page-wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
body:not(.page-id-46) .panel-row-style {
flex: 1 1 auto;
}
:not(.page-id-46) #page-wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
:not(.page-id-46) .panel-row-style {
flex: 1 1 auto;
}
It may seem curious but it’s really just the scope of basic CSS.
By omitting the body selector from the rule the :not rule will apply to any parent of #page-wrapper no matter what that element is. It is basically shorthand for:
*:not() etc…
The universal selector is optional in this case.
:not()
So your rule will work when the body has the class you are looking for or indeed if the html element (or any other parent of #page-wrapper -if any) has the class you are looking for.
Either of your two rules would be ok in this case but adding the body selector to the rule makes it more obvious where you expect to find this class and of course the css parser has less work to do (although this is seldom an issue).
Generally I would not add a tag selector to a class name but in this case as there is always only one body element in a page it makes sense to use it.
Thanks…