How to Apply CSS Conditionally

Manuel campos

I am using the GeneratePress child theme to add lines of CSS.

When you do that, all the styles will be applied to the entire site unless you exclude certain parts of your site.

I found a way that seems to work really well.

Exclude a Page from a Style

This is a way to exclude the style of a specific page:

body:not(.page-id-35473) {
  /* Add your styles here */
}

You just need to substitute the id number for the id number of the page you want to exclude.

This is an example of the code in action:

body:not(.page-id-57346) .inside-article{
  box-shadow: rgba(23, 43, 99, .3) 0 7px 28px;
  border-radius: 8px;
}

Apply Styles to One Page Only

If you want to do the opposite, this is how it is done:

body.page-id-57346  {
 /* Add your styles here */
}

This is an example of the code in action:

body.page-id-57346 .inside-article {
  box-shadow: rgba(23, 43, 99, .3) 0 7px 28px;
  border-radius: 8px;
}
Wanna buy me a Coffee?
JM
About me
I am José Manuel. I am writing about things I know and things that I am learning about WordPress. I hope you find the content of this blog useful.
Linktree
Care for Site Speed?
I think you can’t go wrong with Cloudways, CloudFlare, and Perfmatters.
Perfmatters Cloudways

WPSurfer.com

Resources to host, secure, speed up, rank, and monetize your WordPress sites.
Plugins
Services
Connect
LinkedIn
Facebook
LinkTree