<section> element - Styling ordered lists

The HTML <section> element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it.

by Yashwanth M

HTML

<h1>Simple things: styling ordered lists</h1>

<section>
  <h2>No CSS</h2>
  <ol>
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Element padded</h2>
  <ol class="oldschool">
    <li><span>Collect underpants</span></li>
    <li><span>???</span></li>
    <li><span>Profit</span></li>
  </ol>
</section>

<section>
  <h2>Using Counter</h2>
  <ol class="counter">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Using Counter and transitions</h2>
  <ol class="counter animated">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Zero padded</h2>
  <ol class="counter zeropadded">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Lower Roman</h2>
  <ol class="counter lower-roman">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Upper Roman</h2>
  <ol class="counter upper-roman">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Georgian</h2>
  <ol class="counter georgian">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Armenian</h2>
  <ol class="counter armenian">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Lower Latin</h2>
  <ol class="counter lower-latin">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Upper Latin</h2>
  <ol class="counter upper-latin">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

<section>
  <h2>Lower Greek</h2>
  <ol class="counter lower-greek">
    <li>Collect underpants</li>
    <li>???</li>
    <li>Profit</li>
  </ol>
</section>

CSS

body {
      font-family: helvetica, arial, sans-serif;
      color: #f8f8f8;
      background: #1a1a1a;
    }
    h1, h2 {
      font-weight: lighter;
    }
    section {
      width: 45%;
      float: left;
      padding: 5px;
    }
    .oldschool li {
      color: green;
    }
    .oldschool span {
      color: lime;
    }
    .counter { 
      counter-reset: list;
    }
    .counter li {
      list-style: none;
      position: relative;
      color: lime;
    }
    .counter li::before {
        counter-increment: list;
        content: counter(list) '.';
        position: absolute;
        top: 0px;
        left: -1.2em;
        color: green;
    }
    .animated li::before {
      transition: 0.5s;
      color: green;
    }
    .animated li:hover::before {
      color: white;
      transform: scale(1.5);
    }
    .zeropadded li::before {
      content: counter(list,decimal-leading-zero) '.';
      left: -2em;
    }
    .lower-roman li::before {
      content: counter(list,lower-roman) '.';
      left: -2em;
    }
    .upper-roman li::before {
      content: counter(list,upper-roman) '.';
      left: -2em;
    }
    .georgian li::before {
      content: counter(list,georgian) '.';
      left: -2em;
    }
    .armenian li::before {
      content: counter(list,armenian) '.';
      left: -2em;
    }
    .lower-latin li::before {
      content: counter(list,lower-latin) '.';
      left: -2em;
    }
    .upper-latin li::before {
      content: counter(list,upper-latin) '.';
      left: -2em;
    }
    .lower-greek li::before {
      content: counter(list,lower-greek) '.';
      left: -2em;
    }

JavaScript

// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

/* https://stackoverflow.com/a/20889271/5081877
<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

https://jsfiddle.net/codepo8/0pud1cvv/
Element Filtering Using HTML5 and CSS3 - https://jsfiddle.net/Xeoncross/kQpAf/
Sliding Page Sections - https://jsfiddle.net/macloo/bmLf12nd/

https://stackoverflow.com/a/32089633/5081877
*/