CODEWITHSUNDEEP
htmlcsshtml-listsnested-lists
kirvis
kirvis

Reputation: 79

Nested ordered list HTML: 3rd increment to be of a different type

I need to put some legal text on our website (Terms & Conditions), and the legal guys have made it so that there are 2 levels of incrementation. Not a huge problem, I have found some CSS that does the trick well.

However, the issue is that the 3rd level of incrementation is not 1.1.1 but a, so a different type. And I cannot find a way to achieve that using CSS.

An extra complication is that in yet another paragraph, they use yet another type for the third level: i, ii, iii.

The code I use is below. Any idead on how to achieve this?

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

Upvotes: 1

Views: 402

Answers (1)

kirvis
kirvis

Reputation: 79

OK, I figured it out, thanks to the pointer about the classes from Mr Lister.

The trick was two-fold:

  1. Add specific selector to the CSS to only select the 3rd level of the list
  2. Add 2 classes, one for the lower-alpha and one for lower-roman

Full code below.

<!DOCTYPE html>
<html>
<head>
<style>

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

li ol li ol.alpha> li:before {
  content: counter(item, lower-alpha)".";
}

li ol li ol.roman> li:before {
  content: counter(item, lower-roman)".";
}

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item
     <ol class="alpha">
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
    <li>item
    <ol class = "roman">
      <li>this needs to be i</li>
      <li>this needs to be ii</li>
      <li>this needs to be iii</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

Thanks for putting me in the right direction!

Upvotes: 3

Related Questions