How to Apply CSS Conditionally

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;
}
Manuel Campos, English Professor

Manuel Campos

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.

WP SURFER

home

about

privacy

contact

© 2024 WP SURFER • Made with Love in Costa Rica