How to override global CSS class in the local

Question

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?

you can try ol>li::before, ul>li::before {content: initial !important!} — estinamir
– estinamir, Commented Apr 17, 2020 at 2:43

DengSihan · Accepted Answer · 2020-04-17 02:51:54Z

3

you have three ways to achieve it.

ol>li::before, ul>li::before {
content: '\00A7' !important;
}

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="my.css">

<ol my-tag>
...
</ol>

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

answered Apr 17, 2020 at 2:51

DengSihan

3,0762 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1