There isn’t currently a way to manage the priority of the CSS in Oxygen by reordering the selectors as they come from the various stylesheets. Understanding how the CSS is added by default can be helpful if something isn’t quite working as expected.
There are lots of different ways to apply CSS in Oxygen and it makes a difference in terms of priority.
From top to bottom, this is the order that the styles are added to the page. (the later CSS rules will override the earlier ones unless more specific – like using IDs are more specific than using classes).
First the default Oxygen.css stylesheet is added, containing normalize.css and some base styles for Oxygen components. This is a global stylesheet found on every page and is the first to load.
Next are the styles that are specific to the page or template being viewed. When styles are added to an element using the style controls on an element’s ID, these styles are added here – in the exact order they are added, newest last.
If the page being viewed is inheriting a template, the inherited template CSS will come first.
After all the page/template specific styles are added, this global stylesheet is added which contains a few things, always in the following order;
So any CSS added via stylesheets (2) will always come before those added via custom selectors (3), no matter how late they were added.
Some Oxygen components (like the gallery) will output inline CSS inside the body of the page just underneath where the element is.
The last CSS to be added is any that was added in via a code block. This is added inline towards the very bottom of the page after all of the content. It can be a bad idea to add CSS inside code blocks if they are targeting elements above the fold and visible when the page first loads.
Note – The stylesheets that are output from Oxygen in the <head> are output quite late so they will generally come after any CSS from plugins or WordPress CSS such as the block library stylesheet for Gutenberg. If you’re needing to override these styles from inside a plugin, we have a tutorial on how to load a custom CSS file after Oxygen’s stylesheets.
Adapted from: https://wpdevdesign.com/cheatsheet-the-order-that-css-is-applied-in-oxygen/, viewed 1-Jan-2024
You must be logged in to post a comment.