Based on this article shared in the threads: https://www.techrepublic.com/blog/web-designer/css-specificity-hierarchy-what-you-need-to-know/
Would I be possible to add #id before all classes and then add an ID to all pages to override like inline styling (CSS) does? Any good global ID I could target? Since I can not add ID from backend cms, only class "
Body CSS Class(es)
Add a custom CSS class to the element. Separate multiple class names with a space."
thanks
Hey there,
Thank you for reaching out to us. You can write all of your custom CSS in your child theme’s style.css file. You can target the page IDs to override the CSS in the child theme’s style.css file. To find out the page / post IDs please check out https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59. Once you’ve the page ID you can then add it before your CSS selector, for example:
body.page-id-297 .x-btn {
background: red;
}
This will give your CSS the preference and it will be applied to the button element.
An alternative way would be to add your own class to a page using page’s settings in WP editor. Edit your page in WP page editor, under Page Settings > Body CSS Class(es) add your own class and it will be applied to the page’s body on the font-end (see screenshot)
You can also add IDs to each of your element in Cornerstone (see screenshot)
Please take a look at this thread for more details: https://theme.co/apex/forum/t/how-do-you-override-css-with-a-child-theme-wihtout-important/43855/2
Hope this helps!
Yes this seems to be working! I will have a closer look at a broader scale when I have time but during a quick test it seems to work just fine by adding:
body.my-class .x-btn {
background: red;
}
this was much clear in our communication here between us. Even a good collaboration to solve this issue. ID per element level would be an hassle to add on all pages and element. But class in the body CSS seems to work otherwise I will get back to you.
If I want to have another css file in the child theme. That only loads on the startpage, how would I do?
Can I create another .css file in the folder? Should I only load this on startpage with tools such as clarify? or is it a better way? If so how does it work when we combine css files? It would by then be needed to be excluded from combine css files or?
Hi again,
Yes you can create another CSS file in the child theme and load it on front page only. First create a new CSS file and name it additional_stylesheet.css then upload it to your Child Theme’s root directory (see screenshot)
Then add the following code in your child theme’s functions.php file:
function wpse39130_register_more_stylesheets() {
wp_register_style( 'stylesheet_name', get_stylesheet_directory_uri() . '/additional_stylesheet.css' );
}
add_action( 'init', 'wpse39130_register_more_stylesheets' );
function wpse39130_conditionally_enqueue_my_stylesheet() {
if ( is_front_page() ) {
wp_enqueue_style( 'stylesheet_name' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse39130_conditionally_enqueue_my_stylesheet' );
This will load your additional stylesheet on the front page only. To load it on other pages, I’d suggest you to please check out https://codex.wordpress.org/Conditional_Tags
Hope this helps!
Many thanks guys! I will have a look at this as well and see if it works exactly as preferred.
If I have additional questions or struggle I’ll get back to you here or open a new ticket if you by the closed it do to inactivity. It’s 10 days of inactivity and then you close the ticket right?
Hi There,
Yes, you can write us anytime here, or on a new thread. Yes, a ticket with 10 days of inactivity will be automatically close.
Have a nice weekend,
But how will this work when we combine all css files? Do I need to exclude the additional_stylesheet.css from being combined then or? Since it’s only going to be loaded on home page?
body.my-class .x-btn {
background: red;
}
====
Above results in following issues:
See prints I will roll back since it’s a live environment and it doesn’t look good. So you can not check it live. but you see on the prints. Seems to be the #cs-content id for buttons but for stars not displayed and other blocks such as global block smashed and duplicate footer + promo not styled I don’t know. How can I override all this?
Seems like the shortcodes for icons ends up broken when I add style in child themes css. We have not modified these shortcodes or anything so that’s very strange. But tried to add the inline css back and everything is still odd with buttons and shortcodes!!
GUYS it now bug for some reason and say the theme is not validated! from nothing how come? And I’m and when I click I just jump to the other section where it’s already validated. What is this?
Hi @bracas,
It seems to be styling priority related, how about using !important? Example,
body.my-class .x-btn {
background: red !important;
}
May I know which specific CSS is affecting the icons? Because that one is just for background color. Something caused by custom CSS is not a bug, but I like to check what’s going on first,
And if you’re using my-class to some of your icons, I recommend using a different class on the body. Like,
body.my-body-class .x-btn {
background: red !important;
}
The my-class is just a sample and you have to create your own and you can’t use it over and over to other elements unless those elements are meant to have an identical result to where the class is first applied.
About the validation, please start a new thread about it and we’ll surely check it. And what do you meant it jumps to other section where it’s already validated?
Please fix the class naming first then let’s check it again.
Thanks!
No important should be avoided. It’s because you use #cs-content ID which is above an body.my-class in the hierarchy.
It was not necessary just that class, it’s an example of code just. But button was the hassle since you override the classes with ID and strong selectors. I solved it by adding that #id to the row. But should this be needs when I have my own class for the buttons as well.?
body.my-class #cs-content .x-btn {
background: red;
}
The bug with the icons broken etc was due to a small error in the beginning of the child theme file. This can not be edited which was never the intent but I assume it needs to match theme name? and when there was a . in that row it broke things such as Icons, validation theme etc. And created a new ticket and it is now sorted.
No I know I use my own classes haha. I added it to body css classes and a 100% unique one that is only used there as body.my-cusom-name-of-a-class
So to summarize:
The hassle in adding all css to child theme css was the buttons. Still have issues where text-shadow is visible on firefox.
We see a FUOC even though we have CCSS (critical CSS). Seems like normal styling from theme first load and then our style on top of that. This does not happened with inline css. But best practice is to not have this much inline css and to load it in a file as we tried now.
How can we solve overriding the buttons in a efficient way?
How can we prevent the FUOC?
Fouc is worst on firefox then safari and appears 50-50 on chrome. I can show you next weekend live but I assume you should know without seeing it in real time why it’s happening. Since you know the order the styles are loaded. We need to sort that since it does not look nice at all having it loaded like that.
Can we load anything else to prevent above FUOC? Add any other global ID such as x-root to the selectors? We follow the correct selectors know and how to use child theme css, so this is something on theme end of loading. If I follow the best practice like this we should not see FUOC, since no one want FUOC and it appears as soon as your dont use inline css with theme PRO. So I assume you have some solution to it? Since this is not how it should look 
Hi @bracas,
In that case, you’ll have to do it that way since it’s browser that decides priorities, the same reason !important is there to skip all that. I’m not saying you should still add that, but since you don’t wish to implement it that way then you’ll have to choose, and you also provided the working CSS, please use that. And there are no strong selectors, again, it depends on CSS priorities and it’s not a bug either.
There are many ways to do it, sometimes it may not work depending on how it’s implemented. Example, since you added the class to the body then it’s less prioritized than the added ID or Class below it. Remember, the last added is always the top priority and that’s how the browser works.
I’m not having any issues like this either, my CSS always work except I don’t use body class.
And yes, adding CSS to the child theme’s style.css may not always work as it’s less prioritized compared to the one loaded after it (eg. <style></style>). Hence, !important is still recommended for that, another way is load child theme’s style.css again but on the end of everything, example, you can add this to your child theme’s functions.php.
add_action('wp_head', 'add_child_theme_stylesheet', 99999999999 );
//9999999999 means add it to the very very end (most prioritized)
function add_child_theme_stylesheet() { ?>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">
<?php
}
And if your CSS is in stylesheet file, then FUOC is unavoidable (without a pre-loader) as downloading assets and resources aren’t instant. It depends on the file size, internet speed, rendering speed for downloaded styling, and the device and browser processing power. Inline or in page CSS is instant since it’s downloaded along with the page code and content. Another way is adding a pre-loader to your site, it will only display the finished and rendered page once the resources are downloaded.
Glad the icons issue is now sorted.
Thanks!
I do understand how important is used but it can be very hard to debug when using important as you may know. Which is overriding what etc.
Ok I initially asked in this ticket and understood the body.my-class would be the highest hierarchy since that’s how I asked in the ticket. And also asked then if I could use a global ID that already is there to target in my css selectors to make sure it will be nr1 in the hierarchy.
As you have written before I also understood the other way around than “the last added is always the top priority and that’s how the browser works.”
Why is child them’s style.css less prioritized? it’s there for the reason that you want to override parent. Same as functions.php and in general the use of a child theme.
Ok so add the functions.php code and add it to the very end will be most prioritized, will try that one.
Why is that you should be able to not see FUOC with a stylesheet file. I don’t see how you built your theme with this hierarchy and setup.
Remember all styling with the pagebuilder is also inline and too much inline is not good at all for performance. That creates a lot of performance and loading issues. I don’t see how you built the theme this way and not make it possible to override in a css file without getting FUOC. I’m not a super fan of pre-loader since it’s javascript in one way or another it does not work with js disabled.
And FUOC usually sorts when you have a function for CCSS (Critical CSS) implemented. But here it’s the theme parent styling that is loaded and creates the FUOC.
I really want to sort this out and make it work since it’s much better to load from file than inline for performance when you have a lot of CSS. Inline is only good for low traffic websites and with low amount of inline CSS.
So please help out make this work. I can try the functions.php code in the end of the week, but I want to elaborate on the FOUC with selectors or do you think that add_action will sort the FUOC?
Many thanks in advance.
Hi @bracas,
You don’t have to use !important , I only gave that as one of the options that everyone could use and I explained why it’s there (part of browser standard). And you can do some trial and error to create the final and working combinations of selectors and ID just to make it work instead of using !important like what you already did.
Yes, you could use any ID, there is no limitation for creating and using CSS selectors as long as you’re targeting the correct element. And you could always use browser developer tools to help you composed proper CSS.
The child theme is less prioritized because it’s loaded first, the last will always override the first. That code will not override the parent, the parent theme doesn’t use style.css. That code will only put the child theme’s style.css to the end of wp_head to make it the last.
About FUOC, the stylesheet is a file that browser needs to download. Let me explain with a similar example when you load your page, do the images rendered instantly? It’s not, since the browser will download it first and the download time depends on the cache, internet speed, rendering speed, device’s processing capacity. And once downloaded, the browser will render it. That same goes to any files and stylesheet is included. It’s not theme related, that’s why I suggested using pre-loader to prevent FUOC. And FUOC is more noticeable if you have optimization related to defer and async. Please check this https://kinsta.com/blog/eliminate-render-blocking-javascript-css/
While this should have eliminated all rendering-blocking CSS, enabling this option produced the dreaded FOUC, so I did not leave this option enabled.
Because Asynchronous loading means the browser will not wait for the stylesheet and it will render the unstyled content instantly,
And there is no rule that there should be no inline CSS. In fact, Google and other modern websites use inline CSS. It’s much faster since the CSS is downloaded in one go along with page content. The one with the problem with inline CSS is internet with slow connections. And please check this https://gomakethings.com/inlining-critical-css-for-better-web-performance/
And about the traffic, a 2kb inline CSS moved to stylesheet doesn’t mean it has less 2kb traffic. The bandwidth and payload size is still the same, it’s just moved to a different location (unless there is caching). Inline CSS is good for the dynamic setup that usually changes, while stylesheet is good for permanent or static CSS.
I recommend contacting a developer for the optimization of your site, as there are many things to consider to properly implement your desired setup. It’s not just about the theme, it’s the entirety of Wordpress since it’s modular. But yes, I recommend using pre-loader as I mentioned before as workaround for FOUC, but pre-loader may not even work if you have Async optimization too. Hence, optimizing another may lead to another optimization issue.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.