How to properly redefine main theme css styles, only in one page

When using wp_enqueue_style, add your action to the wp_enqueue_scripts hook at a higher priority than the original theme’s (probably 10, the default). Then make sure your CSS rules have a higher specificity.

Ok, you’re suggesting a thing like this one:

function last() {
  // 
}
add_action('wp_enqueue_scripts','last', PHP_INT_MAX);

and then work on CSS !important too (or similar solution).

Have I understood well? ??

PHP_INT_MAX is going a bit overboard, but that’s the idea.

And you don’t need !important (you never should, unless the previous rule had !important, it just needs to be more specific. Having the same rule but later will overwrite it.

Ok, perfect, thank you very much ??

(it works! I must say I was about to complete my first child-theme, even if for a simple thing like this one it looked like a little overkill. And it left opened two questions: “how to add my style to my child theme”. I suppose this was something I had to do in the functions.php of the child-theme)

Please refer to Child Themes. There’s a preferred alternative to ensuring your CSS is loaded after the parent theme in the examples — using the dependency argument in wp_enqueue_script. A child theme or a plugin are the only valid ways to introduce custom PHP code. These do sound like overkill for something so simple, but the code and files required are very minimal. The same module can be used to hold any other code you may have now or in the future.

For a pure CSS need you could instead use the Additional CSS panel of the theme customizer. Many themes output a unique body class or ID for each page which can be used as part of the CSS selector to style something on one page only.

@bcworkz: my theme has a little panel where you can put some CSS, but this has “global scope”, not something I can load into a single page.

Isn’t strange to create a child-theme only to overwrite 4 rules of the main theme?

Consider that, before rethinking that page and the application inside that page, the CSS was simply pasted into the page HTML body (of course this is not valid HTML, but it worked) ??

I agree that it’s a bit overkill. Still, IMO it’s worth doing because then you can use the same child theme to contain all site customizations you may come up with, now or in the future. Once you have such power that’s so easily implemented, by using a critical eye you should likely find all sorts of little tweaks that will make your site a little better. That’s been my experience anyway. I’ve never had a single site that didn’t have some custom code. There’s always room for improvement.

As I mentioned, you ought to be able to apply styles to a single page through global scope rules by using specific body or article classes that most themes include on templates. For example, with the twentysixteen theme (and probably any twenty* theme as well as many others), let’s say you want the H1 header to be blue only on the page whose ID is 123. You could add this to the global CSS panel to only affect that one page:

.post-123 h1 {
   color: blue;
}

No child theme required. If your theme doesn’t include ID specific classes, you could alter the applicable template to include such a class, but then you’d need a child theme to do so properly ??

And yes, it’s really post-123 for pages. Twentysixteen outputs an article tag similar to the following on all pages:
<article id="post-123" class="post-123 page type-page status-publish hentry">

It also outputs body classes that include one similar to page-id-123.

I haven’t tried it, it’s very interesting, even if a prefer, as long as it works, the solution by Jacob Peattie