Doubts about Nested Lists in HTML

Question

I'm trying to do this only with HTML and inner Css.:

I'm trying to do this only with HTML and inner Css.

Here's what I have:

I know that I have to differentiate the number 1.1 from the rest of the text but I do not know how to do it correctly.

(remembering that I can not use the style tag and add any external file to define styles.)

<ol style="width:90%;text-align:justify;">
  <li>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ex urna, nec mattis mauris hendrerit et. Sed sed fringilla leo. In hac habitasse platea dictumst. In vitae hendrerit mi. Pellentesque venenatis diam sed arcu tincidunt viverra. In
      hac habitasse platea dictumst.
      <p style="padding-left:30px;"> 1.1 -
        <div style: "padding-left:30px;"> Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis ex urna, nec mattis mauris hendrerit et. Sed sed fringilla leo. In hac habitasse platea dictumst. In vitae hendrerit mi. Pellentesque venenatis diam sed arcu
          tincidunt viverra. In hac habitasse platea dictumst. Nulla facilisi. </p>
  </li>
</ol>

div inside p is not good : https://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — Temani Afif, Jul 12 '18 at 13:37
but in your picture you have `1`, `a` and `i` so where does the 1.1 come into it? — Pete, Jul 12 '18 at 13:37
@Pete It's just to demonstrate. The goal is to make the text go below what is text and not the number / letter whatsoever. — Henry Medeiros, Jul 12 '18 at 13:40
@Pete Is it possible to use the ": before" selector within HTML without using a — Henry Medeiros, Jul 12 '18 at 13:53

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

If you want to style a nested list, you should use a list for the structure.

Counter and list-style-type are here to help you style it the way you want.

a quick example alike your screenshot:

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol[class] {
  counter-reset: li;
  width: 600px;
  margin: auto;
  text-align: justify;
}

ol[class]>li {
  counter-increment: li;
}

ol[class]>li>ol>li>ol>li:before {
  content: counter(li, lower-roman)'.';
  position: absolute;
  margin-left: -2em;
}

<ol class>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Notes, that you are better to use counter from the second level instead and reset to none list-style-type. The demo is here to show you the use of list-style-type and how to use a counter turned into lower-roman.

Example only with counter CSS incrementing sublevels such as 1., 1.1 , 1.1.1, 1.2, 1.2.1 ....

ol {
  list-style-type: none;
}

ol[class] {
  counter-reset: li-0;
  width: 600px;
  margin: auto;
  text-align: justify;
}
ol ol {
  counter-reset: li-1;
}
ol ol ol {
  counter-reset: li-2;
}

ol[class] > li {
  counter-increment: li-0;
}
ol[class] > li > ol > li {
  counter-increment: li-1;
}

ol[class] > li > ol > li > ol > li {
  counter-increment: li-2;
}
li  {
  position:relative;
}
li:before {
  margin-right:1em;
  position:absolute;
  right:100%;
}
ol[class] >  li:before {
  content: counter(li-0)".";
}
ol[class] > li> ol > li:before {
  content: counter(li-0)"." counter(li-1);
}
ol[class] > li > ol  li > ol > li:before {
  content: counter(li-0)"." counter(li-1)"."counter(li-2);
}

ol {
  color: tomato;
}
ol li p {
  color: orange;
}
ol ol {
  color: turquoise;
}
ol ol li p {
  color: blue;
}
ol ol ol {
  color: gray;
}
ol ol ol li p {
  color: lightgray;
  text-shadow: 0 0 0 black;
}

<ol class>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
    <ol>
      <li>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
        <ol>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
          <li>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
              est. Mauris placerat eleifend leo.</p>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Here is a codepen to play with and test other settings : https://codepen.io/gc-nomade/pen/VBLMjK

Did you make this example based on the image? I wanted the list to be only of decimals (1, 1.1, 1.1.1, eg ...), do you have any way to do this in this example? — Henry Medeiros, Jul 12 '18 at 14:38
@HenryMedeiros Okay i see , i did mimic your image. but for an increment as you need , the best is to relay totally on counter css . see last snippet updated ;) — G-Cyrillus, Jul 12 '18 at 19:37

Doubts about Nested Lists in HTML

1 Answers1