How to customize CSS list style type of each item
Overview
Lists are the form of data representation commonly used by all types of documents. In HTML there are two types of lists, ordered and unordered lists.
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 such as discs, circles, squares, or by images.
By default, the ordered list items are indicated by numbers and unordered list items by disc bullets.
<!-- Unordered list --><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><!-- Ordered list --><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
Styling list style types
For styling lists, there are CSS list properties that we can use to change the list style type, list position, and add an image as a list type with nothing but the image as the bullet of the list item.
CSS list property
ul, ol {/* list-style is a shorthand property */list-style: list-style-type list-style-position list-style-image}
list-style-type: This is used to change the bullet style of the list.list-style-position: This is used to change the position of the list, two values outside and inside.list-style-image: This is used to add an image as a bullet for the list. If the image fails to show, then a list-style-type will be shown.
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 look at how to change the bullets for the list.
Example
/* Unordered list */ul {list-style-type: '❤️';or /* list-style: '❤️'; */}/* Orderedlist */ol {list-style: '👍'}
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, and so on. To know various supported list style types in CSS, head over to the Mozilla Developer Network (MDN) Docs.
However, using this method will mean that all the style types are going to be the same for all the items of the list. In order to customize style types for each individual item, we need to define it by using the CSS at-rule, @counter-style.
Customize the individual list style type
Using @counter-style, 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.
system: This defines how the list bullets should show. The possible values for it are:cyclic,numeric,alphabetic,symbolic,additive,fixed, and so on.symbols: Here is where we need to give different list style types we want to show for the list items. It can be numbers, alphabets, symbols, even images separated by a space.suffix: Usually, this one should be space. Other than space, we can have anything as a suffix.
Let’s see all this in action.
Example
<!-- Unordered list --><ul><li>One</li><li>Two</li><li>Three</li><li>Four</li></ul><!-- Ordered list --><ol><li>One</li><li>Two</li><li>Three</li><li>Four</li></ol>
/* 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;}
We can use the @counter-style to add individual list style types. When the system is defined as cyclic, the same list style type repeats after all types are done. When it is fixed, the style type for the item number is more than the number of symbols defined. We get the default style type, which is a number for the ordered list and a disc for the unordered list.
We need a system value as fixed only when we know that the number of items is fixed. Otherwise, it’s better to go for cyclic or any other type.
That is all about styling the individual list item types using CSS.
Free Resources
- undefined by undefined
- undefined by undefined
