Only apply the CSS rule to all pages except for one

I'm a beginner when it comes to css. In my wordpress website editor (Onetone theme), I added the following rule to my 'custom css field':

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

It's working well...the scrollbar is gone and scrolling is disabled on my homepage. However, I need this css rule to not apply to one specific page, which is my shop-page where scrolling is necessary to view all products.

My question is: how can I exclude my shop page from this global css rule that I added in the custom css field?

The ID for my homepage is 6, while the shop page has an ID of 61. I've heard about the :not() command but I'm unsure how to use it effectively.

Thank you for any assistance with this issue.

csswordpress

Answer №1

If you want to change the CSS, simply include the ID before the style attributes.

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

You may not need !important since the ID makes it more specific. However, if it doesn't work, consider adding it.

Make sure you specify which element the id #ID61 is targeting. Is it the body? Otherwise, you'll need to use jQuery or JavaScript.

Answer №2

The :not() pseudo-class in CSS is used to exclude specific elements enclosed within the (). By specifying the ID of your page, this style will be applied to all body elements that do not contain it.

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

Here is a live example:

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

Remember that if you want to assign your shop to a different 'page', you will need to update the CSS accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

csshtml

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

There have been very rare occurrences where major websites like Amazon and Facebook do not load a CSS file or apply the rules correctly, resulting in pages looking incomplete: I was recently asked to provide an internal explanation after receiving a compl ...

htmlcssbrowserstylesheet

Superimpose a canvas onto a div element

I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current co ...

javascriptjquerycsshtml

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclo ...

javascripthtmlcss

Items arranged in two rows instead of three, exclusively for certain product categories

While working on a website, I encountered the need to display products in 2 rows instead of the default 3 for one specific category. After researching on Stack Overflow and Google, I came across this valuable solution: add_filter('loop_shop_columns&a ...

phpwordpressfunctionwoocommerce

What is the best way to select the <span> element following an HTML tag?

Is there a way to target the first child of a span after a specific HTML tag? Here is an example of my markup: <div class="gad-help"> <a href="#">AdWords Guide<br><span>ensure best results</span></a> </div> H ...

htmlcsscss-selectors

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Dreamweaver constantly combines an external CSS file with locally stored CSS when running on a local server

When I used Dreamweaver CS5, XAMPP Server, and PHP files in the past, I encountered an issue. The websites within my htdocs folder seemed to be pulling a specific website's CSS file. In 'Live View,' I could see all external .css and .js file ...

javascriptphpcssserverdreamweaver

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

cssresponsive-design

Tips for utilizing both the Element Selector and Class Selector in Jquery

I am working with a simple table that has TDs assigned either the 'PLUS' or 'MINUS' class. My goal is to use jQuery to implement functionality for collapsing all or expanding all. When the Expand All button is clicked, I need to chang ...

javascriptjquerycssjquery-selectors

Ways to eliminate the top space in the background image

After implementing a basic HTML code to add a background image to my webpage, I noticed there is still some empty space at the top of the page. I attempted to adjust the position of the background image using the following code, but it only lifted it upwar ...

javascripthtmlcss

Include a stylesheet as a prop when rendering a functional component

Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...

javascriptcssreactjsjsxnext.js

Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size: The red part should change in both width and height The blue part should only adjust in height, not width ...

javascripthtmlcssreactjselectron

Adjust the background shade of specific characters within an input text field

When a user inputs a string into a standard HTML input field (type="text"), such as "2013/13/29", and validation reveals that the number 13 is invalid in this context, I would like to visually highlight it by changing its background color to red while tu ...

cssregexbackground-colorhtml

I'm attempting to execute a piece of code that retrieves a status count from a dataframe, the output of which will be displayed above my pandas html table

#Here is an example of a dataframe: import pandas as pd import numpy as np data = [['001', 'Completed'], ['002', 'In Process'], ['003', 'Not Started'], ['004''Completed ...

pythonhtmlcsspandas

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

Arranging divs precisely while rotating a Bootstrap Thumbnail

I've been experimenting with creating a "css3 on hover flip" effect for bootstrap thumbnails. It works perfectly fine on simple divs (check it out here) Here's the main CSS3 code I'm using: .front{ position:absolute; transform:pers ...

htmlcsstwitter-bootstrap

Tips for creating responsive content within an iframe

I have inserted a player from a website that streams a channel using an iframe. While I have managed to make the iframe responsive, the video player inside the iframe does not adapt to changes in viewport size. Despite trying various solutions found online ...

javascriptjqueryhtmlcssiframe

Unable to apply CSS styles to a form input using Ajax

Alright, so I've got this Ajax form that successfully fetches the data and displays it in #register_msg. However, I'm also trying to apply some styles to the input forms. Here's my Ajax code, along with the form. But for some reason, the st ...

javascriptphpjquerycssajax