I have the following css in App Theme
:root {
--background-color: green;
}
html, body {
--background-color: blue;
.classA{
background-color: var(--background-color);
In screen, I have a container with style classes = "classA", what is the background color of the container.
As per my css specificity rule below, the background color should be green, but when tested in Outsystems, it is indeed overwritten by html, body which has a lower specificity. Can somebody explain the logic behind.
CSS 3 digit rool for the selectors to my understanding.
:root - 0 1 0
html - 0 0 1
classA - 0 1 0
Hi @Pavithra Balasubramanian ,
Hi, you are looking here at different scopes where a css variable is declared, this has no relation to specificity. The smallest scope that sets the value of a css variable (closest ancestor of the item being targeted by a given rule) will determine which definition of the variable is used.
The :root is the highest scope, html and body are smaller scopes.
See this example to explain better
Dorine
Hello @Pavithra Balasubramanian ,
The behavior you're seeing is likely due to the precedence of rules within the same stylesheet.
The rule with the highest precedence overrides the previous one. If your rules are defined in the same stylesheet, the last rule to be defined has the highest precedence, in your case:
You can check more about CSS precedence here: Styles Loading Order.
Hi Mihai,
I put :root style below html, body style, then as per the last rule precedence, it should take from :root but it did not.
When do we take last rule precedence, when the selector specificity, the order is not clear. I know all effects the precedence but in which order or importance.
thanks for your reply
Pavithra
It seems to be an inheritance issue then. The body’s custom property overrides the one on :root because .classA inherits from its closest ancestor, which is the body set to blue.
Since the element that has the .classA is inside the body, it gets the property from its nearest ancestor. The body sets it to blue, which is why blue wins over green.
If you place the element outside the body or replace body in the css with something else it should be green
____
In terms of which factors to consider and when, there are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:
Here is an article that might help you: Handling CSS Conflicts .
You are right Dorine. Thanks for your explanation. It is to do with the scope.