How can I make an ordered list go 1. 1.1, 1.2, A, B, C, 1.3, 1.4

user_17310860 0
Viewed 163

Since I have not found a post on StackOverflow that satisfies my needs for what I am trying to do, I have made a new question covering my problem.

I am trying to build an ordered list, where I want to have:

1.
  1.1
     A
     B
     C
  1.2
  1.3

Currently, I have the following:

1.
  1.1
     1.1.1
     1.1.2
     1.1.3
  1.2
  1.3

I have tried a few things without luck though, so I would appreciate if I can get some help.

Is this possible what I am trying to do? If yes, how? If no, why?

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

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

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

li li {
    margin: 10px;
}

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


.bolder {
    font-size: 1.17em;
    font-weight: bolder;
    margin: 0px;
}

.parent::before {
    font-size: 1.17em;
    font-weight: bolder;
}
<li class="parent">
  <p class="bolder">How I want it to look like</p>
  <ol>
    <li>This is 1.1
      <ol>
        <li class="subItem">
          This is what I want to be A
        </li>
        <li class="subItem">
          This is what I want to be B
        </li>
        <li class="subItem">
          This is what I want to be C
        </li>
      </ol>
    </li>
    <li>
      Then it continues on with 1.2
    </li>
    <li>
      Then 1.3.. etc.
    </li>
  </ol>
</li>

html-lists css html
2 Answers

If you want to target the third level of lis you can use the ol ol ol li selector. To use uppercase letters, you can use a counter() instead of counters() as with counters() the generated text is the value of all counters while with counter() it's the value of the innermost counter only.

If you set the counter style to upper-alpha the markers will be uppercase letters.

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

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

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

li li {
  margin: 10px;
}

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

.bolder {
  font-size: 1.17em;
  font-weight: bolder;
  margin: 0px;
}

.parent::before {
  font-size: 1.17em;
  font-weight: bolder;
}

ol ol ol li:before {
  content: counter(item, upper-alpha);
}
<ol>
  <li class="parent">
    <p class="bolder">How I want it to look like</p>
    <ol>
      <li>This is 1.1
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
          <li class="subItem">
            This is what I want to be C
          </li>
        </ol>
      </li>
      <li>
        Then it continues on with 1.2
      </li>
      <li>
        Then 1.3.. etc.
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

user_61263730

I think the best way to approach this would be to assign a class to the list that you want to display the letter style then use list-style-type:upper-alpha in that class.

user_171542290
Related