CODEWITHSUNDEEP
csswordpress
Jenson
Jenson

Reputation: 11

Apply css rule except for one page

I am a novice at css. I've added the following rule to my 'custom css field' on my wordpress website editor (Onetone theme):

html, body {margin: 0; height: 100%; overflow: hidden}

It works great...the scrollbar is gone and no scrolling is possible on my homepage. However, I need this css rule to be excluded from one page, that is, my shop-page that needs scrolling to be able to view all products in store.

So my question is: how do I exlcude my shop page from this overall css rule that I added in the custom css field?

My homepage has ID6, the shop page has ID61. I read about the :not() command but do not understand well.

Thanks so much for any help on this.

Upvotes: 1

Views: 1978

Answers (2)

roberrrt-s
roberrrt-s

Reputation: 8210

The :not() negation pseudo-class excludes certain elements that are specified between the (). If you include the ID of your page here, it'll apply the style to every other body element that does not contain it.

html, body:not(#ID6) {margin: 0; height: 100%; overflow: hidden}

Live example:

p:not(#hello) {
    color: #f00;
}
<p id="hello">testing</p>
<p>test</p>

Please do keep in mind that whenever you want to assign your shop to another 'page', you'll have to update the CSS as well.

Upvotes: 0

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

You can try to overwrite the CSS just by adding the id before

body#ID61 {margin: 0; height: auto; overflow: visible }

You probably don't even need !important because you are more specific with the id before. But if it's not working you may need to add this.

But than i need to know on which element the id #ID61 is. The body? Otherwise you need jQuery/javascript

Upvotes: 1

Related Questions