list-style-type examples

index.html

<h1>disc</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>circle</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>square</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>decimal</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>decimal-leading-zero</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>lower-roman</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>upper-roman</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>lower-greek</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>lower-latin</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>upper-latin</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>armenian</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>georgian</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>lower-alpha</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>
<h1>upper-alpha</h1>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>  
</ul>

list-style-type-examples.markdown

list-style-type examples

A Pen by albert on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

ul:nth-of-type(1) {
  list-style-type: disc;
}

ul:nth-of-type(2) {
  list-style-type: circle;
}

ul:nth-of-type(3) {
  list-style-type: square;
}

ul:nth-of-type(4) {
  list-style-type: decimal;
}

ul:nth-of-type(5) {
  list-style-type: decimal-leading-zero;
}

ul:nth-of-type(6) {
  list-style-type: lower-roman;
}

ul:nth-of-type(7) {
  list-style-type: upper-roman;
}

ul:nth-of-type(8) {
  list-style-type: lower-greek;
}

ul:nth-of-type(9) {
  list-style-type: lower-latin;
}

ul:nth-of-type(10) {
  list-style-type: upper-latin;
}

ul:nth-of-type(11) {
  list-style-type: armenian;
}

ul:nth-of-type(12) {
  list-style-type: georgian;
}

ul:nth-of-type(13) {
  list-style-type: lower-alpha;
}

ul:nth-of-type(14) {
  list-style-type: upper-alpha;
}

ul:nth-of-type(15) {
  list-style-type: none;
}