I'm trying to style lists inside of lists in CSS but there is a problem when I have an ordered list inside an unordered one. I'd like the ordered list which is inside an unorered list to begin at 1. and not at 6.1 and I don't know how to do it. Does someone know an easy way to do this ? I don't really understand how the counter behaves in this case.
HTML
<ol>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,
<ol>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,
<ul>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet,</li>
</ol>
<ul>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,
<ol>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,
<ol>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
SCSS
ul {
&>li {
list-style-type: none;
position: relative;
padding-left: 4rem;
&::before {
content: "\2022";
color: charte.$primaryColor;
font-size: 4rem;
position: absolute;
left: 0;
}
}
}
ol {
counter-reset: item;
&>li {
list-style-type: none;
position: relative;
padding-left: 4rem;
&::before {
counter-increment: item;
content: counters(item, ".") ".";
font-weight: 700;
position: absolute;
left: 0;
}
}
}
Normal HTML code meets your expectation without SCSS. Use SCSS only for styling list items and don't make counting in it.
You can style list items with appropriate CSS properties