CODEWITHSUNDEEP
htmlcsshtml-listscss-counter
AlanRubinoff
AlanRubinoff

Reputation: 385

Roman Numbers on ordered doesn't work because of CSS

I was looking for a way to create a nested ordered list with numbers like this

1.
   1.1
   1.2
2.
   2.1
   2.2

I have it working in fiddle.

Fiddle

The problem is when I change the type of ol to roman numbers type="I" it doesn't work because of the CSS I added.

    <ol type="I">
    <li>Elemento primero
        <ol type="I">
            <li>Subelemento primero</li>
            <li>Subelemento segundo</li>
        </ol>
    </li>
    <li>elemento segundo</li>
</ol>
    <ol type="I">
        <li>Subelemento primero</li>
        <li>Subelemento segundo</li>
    </ol>

CSS:

OL {
    counter-reset: item
}
LI {
    display: block
}
LI:before {
    content: counters(item, ".")" ";
    counter-increment: item
}

Upvotes: 0

Views: 2953

Answers (2)

Harry
Harry

Reputation: 89750

You are using CSS counters to display the nested numbering and unlike default ol, the output format does not change with the type="I" attribute. You have to set the counter's output format to be roman numbers explicitly. By default, the output format is decimal numbers but all styles that are available for the list-style-type property are also available for counters (Source: W3C Spec).

This can be achieved by passing upper-roman (equivalent to type="I") or lower-roman (equivalent to type="i") as one of the parameter values to the counters() or counter() function.

OL {
  counter-reset: item
}
LI {
  display: block
}
LI:before {
  content: counters(item, ".", upper-roman)" ";
  counter-increment: item;
}
<ol type="I">
  <li>Elemento primero
    <ol type="I">
      <li>Subelemento primero</li>
      <li>Subelemento segundo</li>
    </ol>
  </li>
  <li>elemento segundo</li>
</ol>
<ol type="I">
  <li>Subelemento primero</li>
  <li>Subelemento segundo</li>
</ol>

Upvotes: 3

JMJ
JMJ

Reputation: 99

Here you go - you just needed to set your content as upper-roman.

OL {
    counter-reset: section;
}
LI {
    display: block;
    counter-reset: number;
}
LI:before {
    counter-increment: section;
    content: "Section " counter(section, upper-roman) ". ";
}

Upvotes: 1

Related Questions