Style subitems in ordered list numbers with CSS

问题

I will use an other design for an ordered list. So I found a nice solution here on SO.

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item);
    background:gold;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}

ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style">
    <li>First</li>
    <li>Second</li>
    <li>Third
        <ol class="none">
            <li>Subitem</li>	
        </ol>
    </li>
    <li>Fourth
        <ul class="none">
            <li>Other Subitem</li>	
        </ul>
    </li>
</ol>

How is it possible not to use this style for sub-items in a list? Why isn't the conditions for my class called none not working? Also what do I have to do, if I want a second ordered list with the same class. It should begin with 1. <ol class="numbered_style" start="1"> didn't helped. Is it possible to start a ordered list with a specify number like 2 or 1.1? For a normal ol I could use start="number", but I think it is disabled because of ol.numbered_style { list-style: none; }.

回答1:

Adding as an answer since there are more than one part to the question:

How is it possible not to use this style for subitems in a list?

Use the children selector (>) to select only the li that are directly present under the parent ol tag instead of selecting all li elements that are at any level under the parent ol tag. The list-style setting has no effect here because the numbering here is generated and added using counters.

But what do I have to do, if I want a second ordered list with the same class. It should began with 1.

Add a counter-reset with the ol.numbered_style selector so that the number is reset everytime that element is encountered. This will make it restart at 1.

I don't need this now, but is there also a solution to start this ordered list with a specify number like 2 or 1.1?

Yes, starting it at 2 is possible. In the counter-reset property we can also provide the initial value of the counter (as the second in a list of space separated values). Refer below snippet for a demo.

body, ol.numbered_style {
  counter-reset: item;
}
ol.numbered_style.starts_at_2 {
  counter-reset: item 1; /* the second is the start value, default is 0 */
}
ol.numbered_style > li:before {
  counter-increment: item;
  margin-bottom: 5px;
  margin-right: 10px;
  content: counter(item);
  background: gold;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style starts_at_2">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

Making it start at 1.1 is a bit more tricky as we have to add one counter at ol level and another at li level. Below is a sample demo.

body{
  counter-reset: ol ;
}
ol.numbered_style{
  counter-reset: li;
  counter-increment: ol;
}
ol.numbered_style > li:before {
  counter-increment: li;
  content: counter(ol) "." counter(li);
  margin-bottom: 5px;
  margin-right: 10px;
  background: gold;
  border-radius: 100%;
  color: white;
  width: 2em;
  text-align: center;
  line-height: 2em;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

来源：https://stackoverflow.com/questions/36099931/style-subitems-in-ordered-list-numbers-with-css

标签

css

list

css-counter