Open fullscreen

Sometimes is needed to-do nested numeration in HTML ordered lists. Here is a simple CSS solution how to achieve this.

CSS:
ol { counter-reset: item; }
ol li { display:block; }
ol li:before { content: counters(item, ".") ". "; counter-increment: item }


HTML:

<ol>
  <li>
    Cities
    <ol>
      <li>
        Tallinn
        <ol>
          <li>Kesklinn</li>
          <li>Lasnamäe</li>
          <li>Mustamäe</li>
        </ol>
      </li>
      <li>
        Narva
        <ol>
          <li>Krenholmi</li>
          <li>Soldino</li>
          <li>Paemuru</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Result:

1. Cities
   1. Tallinn
      1. Kesklinn
      2. Lasnamäe
      3. Mustamäe
   2. Narva
      1. Krenholmi
      2. Soldino
      3. Paemuru

You can do so many nested lists as you want.

When you focus A tag or submit button sometimes outline border looks ugly on websites. Here are examples:
Foobar

This can be easy fixed (for all browsers except Internet Explorer!) by adding 1 line of CSS rule:
a:focus { outline: none; }

IE has non-standard HTML attribute hideFocus=”true” to solve this problem. Of course you don’t like to put this attribute in every <A> tag and submit buttons in your HTML. I have 2 working solutions for all browsers:

CSS expression solution

input, a {
  outline:expression(hideFocus='true');
  outline:none;
}

jQuery solution

$("a, input").each(function() {
  $(this).attr("hideFocus", "true").css("outline", "none");
});