Ordered list base styles: is there a better way?

OK, this works, but it's ugly. Is there a less ugly way to implement some default chain of styling decimal > letters > romans > decimal… ?
:where(ol) {
list-style-type: decimal;
&[type="A" s] {
list-style-type: upper-alpha;
}
&[type="a" s] {
list-style-type: lower-alpha;
}
&[type="I" s] {
list-style-type: upper-roman;
}
&[type="i" s] {
list-style-type: lower-roman;
}

:where(ol) {
list-style-type: lower-alpha;
:where(ol) {
list-style-type: lower-roman;
:where(ol) {
list-style-type: decimal;
:where(ol) {
list-style-type: lower-alpha;
:where(ol) {
list-style-type: lower-roman;
:where(ol) {
list-style-type: decimal;
}
}
}
}
}
}
}
:where(ol) {
list-style-type: decimal;
&[type="A" s] {
list-style-type: upper-alpha;
}
&[type="a" s] {
list-style-type: lower-alpha;
}
&[type="I" s] {
list-style-type: upper-roman;
}
&[type="i" s] {
list-style-type: lower-roman;
}

:where(ol) {
list-style-type: lower-alpha;
:where(ol) {
list-style-type: lower-roman;
:where(ol) {
list-style-type: decimal;
:where(ol) {
list-style-type: lower-alpha;
:where(ol) {
list-style-type: lower-roman;
:where(ol) {
list-style-type: decimal;
}
}
}
}
}
}
}
3 Replies
MarkBoots
MarkBoots3mo ago
don't think there is another way to do it in css don't know how your page is generated, but you could set the list-syle-type inline on the <ol> (or with a custom property, or just a class/attribute)
capt_uhu
capt_uhu3mo ago
the old school nesting might make this easier to read:
ol{list-style-type: decimal;}
ol ol{list-style-type: upper-alpha;}
ol ol ol{list-style-type: upper-roman;}
ol ol ol ol{list-style-type: lower-roman;}
ol{list-style-type: decimal;}
ol ol{list-style-type: upper-alpha;}
ol ol ol{list-style-type: upper-roman;}
ol ol ol ol{list-style-type: lower-roman;}
clevermissfox
clevermissfox3mo ago
If you have your own icons or images that you prefer and make sense you can set up counters or @counter-style + List-style-type
Want results from more Discord servers?
Add your server