Change font weight and padding in numbered list

[carbon14]

Hi again. I managed to find a css code to make my numbered list bold, but it affected also the breadcrumb and everything else. I know the code I found online maybe is wrong. See screenshot and code. I also tried putting the code only on the element CSS but breadcrumb was still affected.

ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}

ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -1em;
list-style-type: none;
counter-increment: item;
}

ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: left;
content: counter(item) “.”;
}

[tristup]

Hi @carbon14,

Thanks for reaching out.
You need to add a prefix selector to this CSS code to avoid overriding the global style. I would suggest you add this code into the Element CSS of the parent section with the $el prefix. Your code looks like the following.

$el ol 
{
    margin: 0 0 1.5em;
    padding: 0;
    counter-reset: item;
}

$el ol > li 
{
    margin: 0;
    padding: 0 0 0 2em;
    text-indent: -1em;
    list-style-type: none;
    counter-increment: item;
}

$el ol > li:before 
{
    display: inline-block;
    width: 1em;
    padding-right: 0.5em;
    font-weight: bold;
    text-align: left;
    content: counter(item) “.”;
}

By adding the prefix, it will only be applied to the list inside the specific section.

Hope it helps.
Thanks