<p>Lists are the form of data representation commonly used by all types of documents. In HTML there are two types of lists namely ordered and unordered lists.&nbsp;</p>
<p>In an ordered list, the items are indicated by serial numbers or letters that are in some order. In an unordered list, the list items are indicated by various types of bullets viz., disc, circle, square, or by an image.&nbsp;</p>
<p>By default, the ordered list items are indicated by numbers and unordered list items by disc bullets.</p>
<pre class="language-markup"><code>&lt;!-- Unordered list --&gt;
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Ordered list --&gt;
&lt;ol&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ol&gt;</code></pre>
<table style="border-collapse: collapse; width: 100.006%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 48.0477%; text-align: left; vertical-align: top;">
<p><strong>Ordered list</strong></p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</td>
<td style="width: 48.0477%; text-align: left; vertical-align: top;">
<p><strong>Unordered list</strong></p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h2 style="text-align: center;">Styling list style types</h2>
<p>For styling lists, there are CSS list properties using which we can change the list style type, list position, and add an image as a list type nothing but the image as the bullet of the list item.</p>
<h3>CSS list property</h3>
<pre class="language-css"><code>ul, ol {
  /* list-style is a shorthand property */
  list-style: list-style-type list-style-position list-style-image
}</code></pre>
<ul>
<li><code>list-style-type</code> - to change the bullet styles of the list</li>
<li><code>list-style-position</code> - to change the position of the list, two values outside and inside</li>
<li><code>list-style-image</code> - to add an image as a bullet for the list, if the image fails to show then list-style-type will be shown</li>
</ul>
<p>So in order to change the bullet type for the list, we just need to use CSS list style type with the bullet we need. Let's see how to change the bullets for the list.</p>
<pre class="language-css"><code>/* Unordered list */
ul {
  list-style-type: '❤️';
  or /* list-style: '❤️'; */
}

/* Orderedlist */
ol {
  list-style: '👍'
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 48.0477%;">
<p><strong>Unordered list</strong></p>
<ul style="list-style: '❤️';">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</td>
<td style="width: 48.0477%;">
<p><strong>Ordered list</strong></p>
<ol style="list-style: '👍';">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</td>
</tr>
</tbody>
</table>
<p>Just by changing the CSS list style type value, we can change the bullets of any list. The possible value for the list style type can be anything, even language-specific letters, roman numerals, etc. To know various supported list style types in CSS head over to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" target="_blank" rel="noopener">this MDN Docs</a>.</p>
<p>But using this way all the style types are going to be the same for all the items of the list. In order to customize style type for every individual item, we need to define it by using CSS at-rule, <code>@counter-style</code>.&nbsp;</p>
<h2 style="text-align: center;">Customize individual list style type</h2>
<p>Using <code>@counter-style</code> we can define the custom list style type for individual items of the list. It has so many properties for customizing the list. There are three important properties that we need to know to customize the list style types.</p>
<pre class="language-css"><code>@counter-style custom-type {
  system: cyclic;
  symbols: "😀";
  suffix: " ";
}

ul {
  list-style: custom-type;
  /*or list-style-type: custom-type; */
}</code></pre>
<ul>
<li><code>system</code> - defines how the list bullets should show. The possible values for it are: cyclic, numeric, alphabetic, symbolic, additive, or fixed, etc</li>
<li><code>symbols</code> - here is where you need to give different list style types you want to show for the list items. It can be numbers, alphabets, symbols, even images separated by a space</li>
<li><code>suffix</code> - usually, this one should be space, to have a space after the style type. Other than space you can have anything as a suffix.</li>
</ul>
<p>Let's see all the above in action.</p>
<pre class="language-markup"><code>&lt;!-- Unordered list --&gt;
&lt;ul&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Ordered list --&gt;
&lt;ol&gt;
  &lt;li&gt;One&lt;/li&gt;
  &lt;li&gt;Two&lt;/li&gt;
  &lt;li&gt;Three&lt;/li&gt;
  &lt;li&gt;Four&lt;/li&gt;
&lt;/ol&gt;</code></pre>
<pre class="language-css"><code>/* style type for unordered list */
@counter-style custom-unordered {
  system: cyclic;
  symbols:  '❓' '✌️' '❤️' ;
  suffix: ' ';
}

/* style type for ordered list */
@counter-style custom-ordered {
  system: fixed;
  symbols: '➡️' '😀' '👍';
  suffix: ' ';
}

ul {
  list-style: custom-unordered;
  /* or list-style-type: custom-unordered; */
}
ol {
  list-style-type: custom-ordered;
}</code></pre>
<table style="border-collapse: collapse; width: 100.006%;" border="1">
<tbody>
<tr>
<td style="width: 48.0477%;">
<p><strong>Unordered list</strong></p>
<ul style="list-style: custom-unordered;">
<li>One</li>
<li>Two&nbsp;</li>
<li>Three</li>
<li>Four</li>
</ul>
</td>
<td style="width: 48.0477%;">
<p><strong>Ordered list</strong></p>
<ol style="list-style-type: custom-ordered;">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</td>
</tr>
</tbody>
</table>
<p>So using the @counter-style that is how we can add individual list style types. If you see when <code>system</code> is defined as <code>cyclic</code> the same list style type repeats after all types are done, and when it is <code>fixed</code> the style type for the item number more than the number of symbols defined, get the default style type i.e., a number for the ordered list and disc for the unordered list.</p>
<p>You need <code>system</code> value as <code>fixed</code> only when you know that the number of items are fixed else it's better to go for <code>cyclic</code> or any other type.&nbsp;</p>
<p>That is all about styling the individual list item types using CSS.</p>

Using CSS list style type you can change the style type of all items in the list. Here's how you can change the style type for individual items in the list

Posts tagged with List

How to customize CSS list style type of each item?