Search code examples
cssglobal-variablesoverridinglocal

How to override global CSS class in the local

I have a global variable defined for the list and is referenced in my html

ol>li::before, ul>li::before {
color: #FFFFFF;
content: '\00A7';
display: inline-block;  
position: absolute;
}

I am trying to override this in my html as I have to remove just this line:

content: '\00A7';

If I simply use it in my local file it doesn't override. Any suggestions on how do I fix this?

Solution

  • you have three ways to achieve it.

    1. add !important after your own css in your css file
    ol>li::before, ul>li::before {
content: '\00A7' !important;
}
    1. add the css after the global css in your html
    <link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="my.css">
    1. add a tag in your html element
    <ol my-tag>
...
</ol>

    ol[my-tag]>li::before{
    // your own css
}