How can I apply this CSS code to only one page on Wordpress?

manpreet Best Answer 3 years ago

I am trying to hide the scroll bar on one page of my wordpress website.

I have been trying with the following code

.body::-webkit-scrollbar { 
    display: none; 
}

However, this code is applying it to all pages on my site.

I tried doing what I normally would do which is to make something like this

.page-id-854 .body::-webkit-scrollbar { 
    display: none; 
}

But then the scroll bar is no longer hidden on any pages.

What can I do to make the code work on just .page-id-854 ?

manpreet 3 years ago

You can use is_page, to determine what page you are on and then load your css based on that. Something like below:

if (is_page( 'Page Title' ) ) {
  // do something
}

Some other alternatives.

// When any single Page is being displayed.
is_page();

// When Page 42 (ID) is being displayed.
is_page( 42 );

// When the Page with a post_title of "Contact" is being displayed.
is_page( 'Contact' );

// When the Page with a post_name (slug) of "about-me" is being displayed.
is_page( 'about-me' );

/*
 * Returns true when the Pages displayed is either post ID 42,
 * or post_name "about-me", or post_title "Contact".
 * Note: the array ability was added in version 2.5.
 */
is_page( array( 42, 'about-me', 'Contact' ) );