CODEWITHSUNDEEP
htmlcssnestedcounter
VMcD
VMcD

Reputation: 21

Counter-reset issues within nested lists

I am using an elaborate numbering list style featuring counters and an ordered list. I originally found this code on the internet so I am not the master of it. But my problem is that when I have to start the list at a specific number (which I did figure out how to do), when I have an unordered list nested with in my elaborate numbered list, the bulleted list appears as numbers in the counter and not as bullets. Thanks!

Here is a simplified version of what I am talking about:

ol.simple-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
    margin-top: 0;
    margin-right: 0;
    margin-left: 3.8em;
    padding: 0;
    counter-reset: li-counter;
}

ol.simple-list > li {
    position: relative;
    margin-bottom: 20px;
    padding-left: -.3em;
    min-height: 3em;
    border-left: 0px solid #CCCCCC;
    margin-left: -5.4%;
}

#start_at_13 ol {
    counter-reset: start 12
}

#start_at_13 li {
    display: block 
}

#start_at_13 li:before {
    content: counter(start) " "; 
    counter-increment: start
}


<section id="start_at_13">
    <ol class="simple-list">
        <li>numbers.
        </li>
        <li>numbers
        </li>
        <li>numbers
        </li>
        <li>numbers
            <ul>
                <li>Should be bullets </li>
                <li>Should be bullets</li>
                <li>Should be bullets</li>
            </ul>
        </li>
        <li>numbers
        </li>
    </ol>
</section>

Upvotes: 2

Views: 506

Answers (1)

Ori Drori
Ori Drori

Reputation: 191946

Change the following rules to apply only to lis that are direct children of ol:

/** I'm not sure why you need this rule at all **/
#start_at_13 ol > li {
  display: block
}

#start_at_13 ol > li:before {
  content: counter(start) " ";
  counter-increment: start
}

Example:

ol.simple-list {
  list-style-type: none;
  list-style-type: decimal !ie;
  /*IE 7- hack*/
  margin-top: 0;
  margin-right: 0;
  margin-left: 3.8em;
  padding: 0;
  counter-reset: li-counter;
}

ol.simple-list>li {
  position: relative;
  /** margin-bottom: 20px; removed for demo purposes **/
  padding-left: -.3em;
  /** min-height: 3em; removed for demo purposes **/
  border-left: 0px solid #CCCCCC;
  margin-left: -5.4%;
}

#start_at_13 ol {
  counter-reset: start 12
}

#start_at_13 ol > li {
  display: block
}

#start_at_13 ol > li:before {
  content: counter(start) " ";
  counter-increment: start
}
<section id="start_at_13">
  <ol class="simple-list">
    <li>numbers.
    </li>
    <li>numbers
    </li>
    <li>numbers
    </li>
    <li>numbers
      <ul>
        <li>Should be bullets </li>
        <li>Should be bullets</li>
        <li>Should be bullets</li>
      </ul>
    </li>
    <li>numbers
    </li>
  </ol>
</section>

Upvotes: 1

Related Questions