Verschachtelte geordnete Listenelemente in beliebiger Tiefe ⇐ CSS

[Anonymous]

Gibt es eine sauberere/trockenere Möglichkeit, verschachtelte, geordnete Listenelemente (z. B. Listenelementnummer 2.4.1.7.8.2.9) richtig einzurücken, anstatt jede einzelne Ebene manuell bis zu einer Tiefe von 10 Ebenen zu definieren?

Code: Select all

/* ------------------------------------------------------------------------
Legal Document Ordered List Styling
Custom counter-based numbering system supporting up to 10 nested levels
Examples: 1. 1.1. 1.1.1. etc.
------------------------------------------------------------------------ */

/* Base list styling - remove default markers */
.prose ol {
list-style-type: none !important;
padding-left: 1.5rem !important;
margin-bottom: 1rem !important;
}

.prose li {
display: list-item !important;
margin-bottom: 0.5rem !important;
padding-left: 0.25rem !important;
}

/* Initialize counters for each nesting level */
.prose ol {
counter-reset: level1;
}

.prose ol ol {
counter-reset: level2;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}

.prose ol ol ol {
counter-reset: level3;
}

.prose ol ol ol ol {
counter-reset: level4;
}

.prose ol ol ol ol ol {
counter-reset: level5;
}

.prose ol ol ol ol ol ol {
counter-reset: level6;
}

.prose ol ol ol ol ol ol ol {
counter-reset: level7;
}

.prose ol ol ol ol ol ol ol ol {
counter-reset: level8;
}

.prose ol ol ol ol ol ol ol ol ol {
counter-reset: level9;
}

.prose ol ol ol ol ol ol ol ol ol ol {
counter-reset: level10;
}

/* Level 1: Large numbered items (e.g., "1. ") */
.prose > ol > li {
counter-increment: level1;
font-size: xx-large;
font-weight: 600;
color: hsl(var(--primary));
}

.prose > ol > li::before {
content: counter(level1) ". ";
font-size: xx-large;
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 2: Standard size with hierarchical numbering (e.g., "1.1. ") */
.prose ol ol > li {
counter-increment: level2;
font-size: 1rem;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol > li::before {
content: counter(level1) "." counter(level2) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 3: Three-tier numbering (e.g., "1.1.1. ") */
.prose ol ol ol > li {
counter-increment: level3;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 4: Four-tier numbering (e.g., "1.1.1.1. ") */
.prose ol ol ol ol > li {
counter-increment: level4;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 5: Five-tier numbering */
.prose ol ol ol ol ol > li {
counter-increment: level5;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 6: Six-tier numbering */
.prose ol ol ol ol ol ol > li {
counter-increment: level6;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 7: Seven-tier numbering */
.prose ol ol ol ol ol ol ol > li {
counter-increment: level7;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) "." counter(level7) ".  ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 8: Eight-tier numbering */
.prose ol ol ol ol ol ol ol ol > li {
counter-increment: level8;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) "." counter(level7) "." counter(level8) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 9: Nine-tier numbering */
.prose ol ol ol ol ol ol ol ol ol > li {
counter-increment: level9;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) "." counter(level7) "." counter(level8) "." counter(level9) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

/* Level 10: Ten-tier numbering (maximum depth) */
.prose ol ol ol ol ol ol ol ol ol ol > li {
counter-increment: level10;
font-weight: normal;
color: hsl(var(--foreground));
}

.prose ol ol ol ol ol ol ol ol ol ol > li::before {
content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) "." counter(level7) "." counter(level8) "." counter(level9) "." counter(level10) ". ";
font-weight: 600;
color: hsl(var(--primary));
}

Code: Select all

[list]
[*]Some list item
[*]Another

Indented 2 levels deep
[*]Here are some more levels

Hello

You get the idea, but it goes 10 levels deep
[/list]
[*]Some other list item
[*]Some other list item
[*]Some other list item
[*]Some other list item



[*]Yet more


[*]And it could go on...
[*]And on...
[list]
And on!
[/list]