How to change the numbering style in html. Correct numbering in HTML nested numbered lists using CSS. Nested lists with automatic numbering

Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the element parameters

Arabic numerals (1, 2, 3, ...);
Arabic numerals with a leading zero for numbers less than ten (01, 02, 03, ...,10);
capital Latin letters (A, B, C, ...);
lowercase Latin letters (a, b, c, ...);
Roman numerals in uppercase(I, II, III, ...);
lowercase Roman numerals (i, ii, iii, ...);
Armenian numbering;
Georgian numbering.

From a practical point of view, the principles of displaying items in a bulleted list can be applied in a similar way to a numbered list. But given that we are dealing with an enumeration, there are some features that will be discussed further.

List numbering

It is allowed to start the list from any number; the element's start attribute is used for this purpose

. The value is any integer positive number. It does not matter what type of numbering is set, even if Latin letters are used as a list. If both the start and value attributes are applied to a list at the same time, then the latter takes precedence and the numbering is displayed from the number specified by value , as shown in Example 1.

Example 1: Changing the list numbering

Lists

You should take good care of your workplace.
Adjust the lighting in the room so that the light source is located to the side or behind the operator.
To avoid medical complications, it is recommended to choose a chair with a soft seat.

The first element of the list in this example will begin with the Roman numeral IV, since the start="4" attribute is specified, then comes the number V, and the last element comes out of order and is assigned the number X (Figure 1).

Rice. 1. Roman numerals in the list

Writing numbers

By default, a numbered list has a certain appearance: first there is a number, then a dot, and after that the text is displayed separated by a space. This form of writing is visual and convenient, but some developers prefer to see a different way of designing the numbering of lists. Namely, so that instead of a dot there is a closing bracket, as shown in Fig. 2 or something similar.

Rice. 2. Numbered list view with bracket

Styles allow you to change the type of list numbering using the content and counter-increment properties. First, the ol selector needs to be set to counter-reset : item , this is necessary so that the numbering in each new list starts anew. Otherwise, the numbering will continue and instead of 1,2,3 you will see 5,6,7. The item value is a unique identifier for the counter; we choose it ourselves. Next, you need to hide the original markers through the style property list-style-type with the value none .

The content property typically works in conjunction with the ::after and ::before pseudo-elements. Thus, the li::before construction says that some content must be added before each element of the list (example 2).

Example 2. Creating your own numbering

Li::before ( content: counter(item) ") "; /* Add a parenthesis to the numbers */ counter-increment: item; /* Set the name of the counter */ )

The content property with the value counter(item) displays a number; By adding a parenthesis, as shown in this example, we get the required type of numbering. counter-increment is needed to increase the list number by one. Note that the same identifier, named item , is used throughout. The final code is shown in Example 3.

Example 3: Changing the list view

Lists

First
Second
Third
Fourth

Using the above method, you can make any type of numbered list, for example, take a number in square brackets, only one line in the styles will change.

Content: "[" counter(item) "] ";

List with Russian letters

There is a numbered list with Latin letters, but there are no Russian letters for the list. They can be added artificially using the above technique. Since the numbering is done through styles, the list itself remains original, only the selected class is added to it, let’s call it cyrilic (example 4).

Example 4: Code to create a list

One
Two
Three

Adding letters is done using the ::before pseudo-element and the content property. Since each line must have its own letter, we will use the pseudo-class :nth-child(1) , with the letter number written in parentheses. The first letter, naturally, is A, the second is B, the third is C, etc. This entire set is added to the li selector as follows (example 5).

Example 5: Using the pseudo-class:nth-child

Cyrilic li:nth-child(1)::before ( content: "a)"; ) .cyrilic li:nth-child(2)::before ( content: "b)"; ) .cyrilic li:nth-child(3)::before ( content: "at)"; )

In this example, each letter is followed by a parenthesis, all letters are lowercase. You can define your own type of list numbering, for example it can contain capital letters with a dot, with one or two brackets, or only letters. Unlike standard numbering, we are free to do whatever we want here. A list of ten letters should be enough for almost all situations, but if this suddenly turns out to be not enough, nothing prevents us from expanding our list to include at least all the letters of the Russian alphabet.

We finally adjust the alignment and position of the letters, optionally specify the font size, color and other parameters (example 6).

Example 6. List with Russian letters

List

Borsch
Pike cutlets
Kulebyaka
Mushrooms in sour cream
Pancakes with caviar
Kvass

The result of this example is shown in Fig. 3.

Numbered lists are a collection of elements with their serial numbers. The type and type of numbering depends on the tag attributes

as shown below.

First point
Second point
Third point

If you do not specify any additional attributes and just write the tag

Example 11.3. Create a numbered list

Numbered list

Working with time

creating punctuality (you will never be late for anything);
cure for punctuality (you will never be in a hurry);
change in perception of time and clocks.

The result of this example is shown in Fig. 11.3.

Rice. 11.3. Numbered list view

Note that a numbered list also adds automatic indentation to the top, bottom, and left of the text.

The following values can serve as numbering elements:

Arabic numbers (1, 2, 3, ...);
capital Latin letters (A, B, C, ...);
lowercase Latin letters (a, b, c, ...);
capital Roman numerals (I, II, III, ...);
lowercase Roman numerals (i, ii, iii, ...).

To indicate the type of numbered list, use the type attribute of the tag

List type	HTML code	Example
Arabic numbers		1. Cheburashka 2. Crocodile Gena 3. Shapoklyak
Capital letters of the Latin alphabet		A. Cheburashka B. Crocodile Gena C. Shapoklyak
Lowercase letters of the Latin alphabet		a. Cheburashka b. Crocodile Gena c. Shapoklyak
Roman numerals in upper case		I. Cheburashka II. Crocodile Gena III. Shapoklyak
Roman numerals in lower case		i. Cheburashka ii. Crocodile Gena iii. Shapoklyak

To start a list with a specific value, use the start attribute of the tag

Example 11.4. List numbering

Roman numbers

King Magnum XLIV
King Siegfried XVI
King Sigismund XXI
King Husbrandt I

The result of this example is shown in Fig. 11.4.

Rice. 11.4. Numbered list with Roman numerals

For lists, the creation of which using HTML is described here, the following CSS rules are provided.

list-style-type

Specifies a bullet or list numbering instead of the type attribute in the HTML code. Property values for bulleted lists can be:

disk- circle, set by default.
circle- circle.
square- square.

For numbered lists, the property is usually assigned the following values:

decimal- Arabic numerals, default value.
lower-roman- small Roman numerals.
upper-novel- capital Roman numerals.
lower-alpha- lowercase Latin letters.
upper-alpha- capital Latin letters.

Also, for any list type, the list-style-type property can be set to none, which will remove the marker altogether.

Other values are available for numbered lists, such as cjk-ideographic sets ideographic numbering, Armenian- traditional Armenian, and decimal-leading-zero will set the numbering in Roman numerals, but with a leading zero: 01, 02, 03... 09, however in practice these and similar values are used extremely rarely.

The example below displays three lists: a numbered list with traditional Armenian numbering, a bulleted list with a circle, and a numbered list with items numbered ideographically.

<a href="https://128gb.ru/en/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">Lists CSS</a>

First point
Second point
Third point

First point
Second point
Third point

First point
Second point
Third point

Result.

The color of the markers matches the color of the text in the list specified by the property color.

list-style-image

Allows you to set your own image as a list marker. For example, if the folder containing the list page contains the file marker.png, which you want to use, then the design code will be as follows:

Ul ( list-style-image: url("marker.png"); )

list-style-position

Determines the position of the marker: either it is placed outside the border of the list element ( list-style-position: outside), or the text wraps around it ( list-style-position: inside).

The example below shows the difference between these values. In the first case, the marker is inside the list; in the second case, it is placed outside the list.

list-style-position

Just look at the difference between inside and outside.
In the case of inside, the marker fits directly into the list, without going beyond its boundaries and without interfering with the layout. The text flows around it, the marker seems to be inside.
The outside value moves the marker outside the list.

As a result, the following page is created:

list-style

Allows you to shorten the code by writing all three listed properties in one line. The rules are written separated by spaces:

Ul ( list-style: square inside; )

Let's look at an example of a page with three lists. The first is numbered with numbers in the format 01, 02, the second is marked with a custom picture (file marker.png in the folder with the page), the marker of the third list is disabled.

The HTML code is given below.

list-style

First point
Second point
Third point

First point
Second point
Third point

First point
Second point
Third point

The browser will display the following page.

Quite often you have to use numbering: when creating various lists, lists, designing a table of contents or table of contents, etc.

CSS uses counters to automate the numbering process.

Let's start with a simple example. Then, in a more complicated way, we’ll create a nested list with automated numbering of its items and sub-items.

Meter identification

First you need to identify the meter.

Using the counter-reset property, the counter is assigned a name and an initial value. The name can be anything, but cannot start with a number.

Code snippet:

This entry says that for the tag a counter named number with an initial value of 3 is installed.

By default, the initial value of the counter is 0.

Counter increment

The counter-increment property is used for this. It is also used to specify counter increments - the number by which the counter value will increase.

Code snippet:

body ( counter-reset : number 3 ;)
body p ( counter-increment : number 3 ; }

This code snippet says that paragraphs ( tag

) in the body of the document will be numbered with the number counter in increments of 3.

The first paragraph will be numbered 6, since the initial value of the counter is 3 and its increment is 3.

The default value for counter increments is 1.

Now all the necessary counter parameters are set: name, initial value, increment and element that will be numbered. Further....

Counter display

Now you need to display the counter value and set the rules for its location. This is done using the content property and the before and after pseudo-elements.

The content property inserts the content before ( before) or after ( after) of the specified element.

Code snippet:

body ( counter-reset : number 3 ;)
body p:after ( counter-increment : number 3 ; content : " equals " counter(number) "." ;)

So, to the previous code snippet we added a content property that prints the word "equals" followed by the value of the counter number and a dot "." . All this is inserted onto the page after the paragraph content ( tag

), which is what the after pseudo-element says.

Eventually...

Below is the described example.

Code snippet:

2 times 3

3 times 3

4 times 3

5 times 3

Result:

Nested lists with automatic numbering

Let's look at an example of using counters to automate the process of numbering nested lists.

You should already know, both from HTML and from studying lists in CSS, that list items are numbered automatically. But this numbering is the simplest.

What about automatic numbering of subclauses like 1.1, 1.2, 2.1, 2.2, etc.?

This problem is solved using counters that allow you to automate the process of numbering nested lists.

Code snippet:

Automatic numbering in CSS

First list item

First subparagraph of paragraph 1

Second subparagraph of 1st paragraph

Second list item

First subparagraph of paragraph 2

Second subparagraph of 2nd paragraph

Third item on the list

First subparagraph of paragraph 3

Second subparagraph of the 3rd paragraph

Third subparagraph of the 3rd paragraph

Result:

This is how you automate the process of numbering nested lists!

From the author: Web browsers allow you to change appearance many elements on a page with using CSS. But when rendering some elements on the page, browsers stubbornly refuse to change their design. For example, form elements such as drop-down lists (select), radio buttons (radio) and checkboxes (checkbox) have their own specific appearance in each operating system, and browsers are trying to impose this look on web forms.

Web browsers also specify how unnumbered and numbered lists should be displayed. For example, browsers make it very difficult to change the appearance of bullets for unnumbered lists and numbers for numbered lists. Of course, there are several CSS properties for working with lists, such as list-style-type, list-style-image and list-style-position. But even doing something simple (like changing the color of the numbers in a list) requires resorting to sophisticated HTML/CSS workarounds.

Luckily, by combining a few lesser-known CSS properties, you can give your numbered list numbers the appearance you want. In fact, after reading this tutorial, you will be able to change the fonts, colors and almost any other attribute of the numbers in a numbered list.

The whole secret consists of two components: firstly, completely hide the standard (default) numbers in the numbered list, and secondly, use the ::before pseudo-element to add these numbers back.

1. Add a class or identifier (ID) for the numbered list. This is a good idea, allowing you to later identify each list for which you want to create your own counters:

This is the first element
This is the second element
This is the third element
This is the fourth element
This is the fifth element
This is the sixth element

< ol class = "custom-counter" >

< / ol >

If you just use tag selectors like ol or li, you'll end up with the same counters, with the same appearance, for all the numbered lists on the page.

2. Cancel the default view of the list marker. First, you need to make sure that the browser will not add default appearance for the counters. The following rule will help you do this:

Custom-counter ( margin-left: 0; padding-right: 0; list-style-type: none; )

Custom - counter (

margin - left : 0 ;

padding - right : 0 ;

list - style - type : none ;

This rule also removes the indentation that browsers add at the beginning of numbered lists. Since some browsers use the margin property for indentation, and others use the padding property, you need to set both of these properties to zero.

3. Set a name for the counter-increment property of the list elements. There is a property in CSS called counter-increment. It allows you to set a name for your counter. This doesn't give us anything special, except that we can identify our counter when using the ::before pseudo-element (which we'll do in the next step). Here's a simple code example for specifying the counter name:

Custom-counter li ( counter-increment: step-counter; )

Custom - counter li (

counter - increment : step - counter ;

In this example, the name step-counter doesn't mean anything special. It is not a value for a CSS property or anything else. This is just a name that we will use from now on. You can come up with any name: step, counter, or even bottles-of-root-beer-on-the-wall.

4. Use the ::before pseudo-element to add counter numbers and style them:

Custom-counter li::before ( content: counter(step-counter); margin-right: 5px; font-size: 80%; background-color: rgb(200,200,200); color: white; font-weight: bold; padding : 3px 8px; border-radius: 3px; )

Custom - counter li::before(

content : counter (step - counter ) ;

margin - right : 5px ;

padding: 3px 8px;

border - radius : 3px ;

The pseudo-element::before allows you to insert content before an element. In our case, it will insert the content before the list element. You are using CSS property content to tell the browser what content it should put at the beginning of the list element. These could be real words or something automatically generated by the browser.

Here we use counter(), which takes as a parameter the identifier obtained from the counter-increment property. Remember that in step 2, we specified the name step-counter for the counter-increment property, thereby giving the counter a name and telling the browser to use a counter for each element of the list. The counter will increment by one for each element of the list, i.e. As a result, we will have the number 1 before the first element of the list, the number 2 before the second element of the list, etc.

Of course, browsers usually do this. However, by using the ::before pseudo-element we can also style these numbers in a way that would not be possible with standard numbered list items. Essentially, all the other properties in the above rule are used to simply create a cool look for the counter (eg. background color, rounded corners, different font color, etc.). These styles demonstrate just some of the ways you can change the appearance of numbers in numbered lists. And there's even more you can do, so feel free to use the CSS tricks you know to create interesting, fun, and beautiful numbered lists.

You can see a ready-made working example of using this technique on the website