Hi everyone
I'm a bit confused about how to use CSS inside blocks. For example, I have a block with a "List" widget, and I want to change the background color of a "ListItem" on hover. I tried doing it like this, but it only works if I add the !important flag. From what I know, that's considered bad practice.
So, what's the correct way to do this?
Hi Lukasz,
This is not because of the block, but because of the specificity of the built‑in hover rule in OutSystemsUI theme for list items, which is written as
.desktop .list .my-list-item:hover:not(.list-item-no-hover):not(.list-item-selected)
, which carries a specificity of six class selectors (0,6,0). Your original selector .my-list-item:hover only has one class (0,1,0), so, even if your stylesheet is loaded later, it will never outrank the rule without using !important.
You can learn more about CSS specificity here: CSS Specificity .
Try this instead:
.desktop .list .my-list-item:hover:not(.list-item-no-hover):not(.list-item-selected){
background-color: red;
}
.list .my-list-item:hover{
____
Also you can check the rule's specificity by hovering on it:
Is it possible that something in your screen is overriding this? Outsystems uses a specific order to load the styles:
Can you open the inspector in your browser and look for your style and see if something else is overwriting it?
This is correct priority of the css class with the same name when defining in Outsystems.
For further document, please refer to these links:
https://outsystemsui.outsystems.com/OutSystemsUIWebsite/CheatSheet
https://www.w3schools.com/css/css_specificity.asp
Hi Łukasz Kaproń
You can add this css:
.desktop .list .my-list-item:hover:not(.list-item-no-hover):not(.list-item-selected) {
background-color: var(--color-neutral-0);
I hope this helps
Thanks
Hi Łukasz Kaproń,
it is possible that something on your screen is overriding the style? OutSystems loads styles in a specific order:
⦁ System style sheet for container widgets in the grid
⦁ Block style sheet
⦁ Theme style sheet (which also includes a base theme if defined)
⦁ Screen or email style sheet
⦁ Theme extra style sheet (with grid settings defined in the theme properties)
⦁ Styles generated by Service Studio when you use the Styles Editor
⦁ Inline styles defined in attributes or extended properties
Please could you use your browser inspector to see if your style is being overridden by any other style?
try to implement this CSS instead of what you are using right now:-
Hope this Helps
Thanks!
@ADITI CHATURVEDI ,
what is the purpose of this ? By all looks of it, you just regurgitate what has already been answered half a year ago.
recipe : copy 2 previous answers, (ask AI to) reword it a little, post, collect the 2 only upvotes in this entire post.
Dorine
The correct way is not to use !important, but to make your selector more specific.
Add a custom Style Class to the ListItem and target that class in your block CSS. This cleanly overrides the default widget styles without fighting them.
block CSS:
.custom-list-item:hover { background-color: #f2f2f2;}
it’s clear, maintainable, and works correctly inside blocks without relying on !important.
@Mulayam yadav ,
I suggest you have a try before replying.
although adding custom classes can be part of it, using a custom class in and of itself doesn't magically make it more specific at all.
Hey Łukasz,
The theme’s hover rule has high specificity, so your simple selector loses without !important.
Quick fix:
Add a custom class to the List widget (e.g., my-list).
Then in your block CSS:
.my-list .list-item:hover {
background-color: #your-color;
Clean, no !important, and reliably overrides the default.
@Bhanu Pratap ,
although adding custom classes can be part of it, using a custom class in and of itself doesn't magically make it more specific at all. Your selector is not more specific than the OutSystems UI selector.
Since this older post is dragged up now :
If your CSS is in a screen or an application theme, your selector only needs to be equally specific as the OutSystems UI selector (since it is loaded later), if it is in a block, it needs to be more specific than the OutSystems UI selector (since it is loaded earlier).
this is the OutSystems UI selector
.desktop .list .list-item:hover:not(.list-item-no-hover):not(.list-item-selected)
So for screen and theme, you can just copy that. For blocks, you will need to add more specificity.
An extra class is a way to do it. I would maybe not add that to the list in the block, but to a top container of the block. both will work, but i like to restrict my block css to my block as a general rule of thumb.
In extremis, if you use your block on a screen with another list, and that list for some reason has the same extra class as your block list, then your block CSS would affect that list if you target the list with an extra css.
so both these will work for block CSS:
.desktop .my-block .list .list-item:hover:not(.list-item-no-hover):not(.list-item-selected)
.desktop .list.my-list .list-item:hover:not(.list-item-no-hover):not(.list-item-selected)