If you have ever tried changing css styles of line numbers (digits) in ordered lists

, then, for sure, faced problems. It is impossible to reach the styles of these elements using css selectors. But quite often the interface design involves changing their color, background, size, etc.

Here's the simplest example of an unstyled list:

html

1. To plant a tree
2. To build a house
3. Raise a son

Let's look at several ways to solve the above problem.

Traditionally clumsy way.

The traditional way of solving this problem is to hide the line numbers that were automatically placed by the browser. This uses the list-style property: none; ...

css

li (list-style: none;) .num (color: white; background: # 2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)

html

1. 1 To plant a tree
2. 2 To build a house
3. 3 Raise a son

Agree, it looks redundant and not flexible. We hide the automatically placed ordinal numbers and replace them manually with the specified values, we clog the layout, etc.

Let's see how you can achieve the same result without cluttering the layout and using the :: before pseudo-element and the content, counter-increment, counter-reset css properties.

Nice and correct way.

First, we will provide the code and demo, and then we will figure out what's what.

css

ol (counter-reset: myCounter;) li (list-style: none;) li: before (counter-increment: myCounter; content: counter (myCounter); color: white; background: # 2980B9; display: inline-block; text-align: center; margin: 5px 10px; line-height: 40px; width: 40px; height: 40px;)

html

1. To plant a tree
2. To build a house
3. Raise a son

As you can see, the html code remains clean and beautiful. In this case, all styling of the list items is transferred to css.

Let's break it down point by point:

• li :: before- creates a pseudo-element inside the list that replaces the first child.
• counter-reset: myCounter;- resets the css counter myCounter inside each
  .
  1. counter-increment: myCounter;- increments css counter myCounter for each pseudo-element :: before.
  2. content: counter (myCounter);- displays the current value of the counter myCounter inside the :: before pseudo-element.

more details about css counters can be found in

HTML supports three different types of lists, each of which has its own list:

• - numbered (using numbers or letters) list, each element of which has a sequential number (letter);
  1. - a bulleted (not numbered) list, next to each element of which a marker is placed (and not numeric or alphabetic characters denoting a serial number);

     • - the definition list consists of name / value pairs, including terms and definitions.

     Numbered Lists

     In a numbered list, the browser automatically inserts the item numbers in order, starting at some value (usually 1). This allows you to insert and delete list items without breaking the numbering, since the rest of the numbers will be automatically recalculated.
     Numbered lists are created using a block element

     (from the English Ordered List - numbered list). Further into the container
     an element is placed for each item in the list
     1. (from the English List Item - a list item). The default is a numbered list with Arabic numbers.
        Tag
        has the following syntax:
        1. item 1
        2. item 2
        3. item 3

        The elements of a numbered list must contain multiple list elements, as shown in the following example:

        Example: Numbered List

        • Try it yourself "

        Step-by-step instruction

        1. Get the key
        2. Insert the key into the lock
        3. Turn the key two turns
        4. Get the key out of the lock
        5. Open the door

        Step-by-step instruction

        1. Get the key
        2. Insert the key into the lock
        3. Turn the key two turns
        4. Get the key out of the lock
        5. Open the door

        Sometimes, when looking at existing HTML codes, you will come across the argument type in element

        , which is used to indicate the type of numbering (letters, Roman and Arabic numerals, etc.). Syntax:

        Here: type is the characters of the list:

        • A - uppercase Latin letters (A, B, C...);
        • a - lowercase Latin letters (a, b, c...);
        • I - large Roman numerals (I, II, III...);
        • i - small Roman numerals (i, ii, iii...);
        • 1 - Arabic numerals (1, 2, 3...) (Used by default).

        If you want the list to start with a number other than 1, you must specify this using the attribute start tag

        .
        The following example shows a numbered list with large Roman numerals and an initial value of XLIX:

        You can start numbering with the attribute value which is added to the element

        1. in the following way:

        7. In this case, the sequential numbering of the list will be interrupted and the numbering will start over from this point, in this case from seven.

           An example of using the attribute value tag

        8. , which allows you to change the number of this list item:

           In this example, "First List Item" would be number 1, "Second List Item" would be number 7, and "Third List Item" would be number 8.

           Formatting numbered lists with CSS

           To change the list numbers, use the property list-style-type CSS style sheets:

           Styles for numbered lists

           Example	Meaning	Description
           a, b, c	lower-alpha	Lower case
           A, B, C	upper-alpha	Uppercase letters
           i, ii, iii	lower-roman	Roman numerals in lowercase letters
           I, II, III	upper-roman	Uppercase roman numerals

           Example: Applying a CSS Property list-style-type

           Bulleted Lists

           Bulleted lists are essentially similar to numbered lists, except that they do not contain sequential numbering of items. Bulleted lists are created using a block element

           (from the English Unordered List - an unordered list). Each element of the list, as in numbered lists, begins with a tag
           • ... The browser indents each list item and automatically displays bullets.
             Tag
             has the following syntax:
             • First point
             • Second point
             • Third point

             In the following example, you can see that, by default, a small filled circle marker is added in front of each list item:

             Inside the tag

             • it is not necessary to place only text, it is permissible to place any element of streaming content (links, paragraphs, images, etc.)

               Nested lists

               Any list can be nested within another. Inside element
             • it is possible to create a nested list, or a second-level list. To nest a list, describe the new list inside the element
             • already available list. When you nest one bulleted list in another, the browser automatically changes the bullet style for the second-level list. Any list can be nested within another. The following example demonstrates the structure of a bulleted list nested within a second numbered item.

               Example: Nested Lists

               • Try it yourself "
               • Monday
                 1. Send mail
                 2. Visit to the editor
                    • Choosing a theme
                    • Decorated design
                    • Final report
                 3. Evening message viewing
               • Tuesday
                 1. Revise the schedule
                 2. Send images
               • Wednesday...
               • Monday
                 1. Send mail
                 2. Visit to the editor
                    • Choosing a theme
                    • Decorated design
                    • Final report
                 3. Evening message viewing
               • Tuesday
                 1. Revise the schedule
                 2. Send images
               • Wednesday...

               Formatting bulleted lists

               To change the appearance of the list marker, use the property list-style-type CSS style sheets:

               The following example shows the different styles of bulleted lists:

               Example: Bullet List Styles

               • Try it yourself "
               • Coffee
               • Coffee
               • Coffee
               • Coffee

               Disc:

               • Coffee
               • Milk

               Circle:

               • Coffee
               • Milk

               Square:

               • Coffee
               • Milk

               None:

               • Coffee
               • Milk

               Graphic markers.

               HTML has the ability to create a list with graphic markers. It is one thing when the bullets of the list are standard circles or squares, and quite another when the developer himself selects the marker in accordance with the design of the page. Small pictures are often used to make list items look pretty.
               To replace a regular marker with a graphic one, replace the property list-style-type per property list-style-image and specify the URL-address of the picture:

               Example: Graphic markers

               • Try it yourself "

               Zodiac signs

               • Taurus
               • Gemini

               Zodiac signs

               • Aries
               • Taurus
               • Gemini

               Definition (description) lists

               Definition lists are very handy for creating, for example, your personal vocabulary of terms. Each item in the definition list has two parts: a term and its definition.
               You put the whole list in an element

               (from the English Definition List - a list of definitions). It includes tags

               (from the English Definition Term - a defined word, term) and

               (from the English Definition Description - the description of the defined term).
               Lists of definitions are often used in scientific, technical and educational publications, making out with their help glossaries, dictionaries, reference books, etc.

               The general structure of the description list is as follows:

               First term

               Description of the first term

               Second term

               Description of the second term

               The following example shows one of the possible uses of the definition list:

               Example: List of definitions

               • Try it yourself "

               World Wide Web - from the English. The World Wide Web (WWW) is a distributed system that provides access to related documents located on various computers connected to the Internet. The Internet is a set of networks that use a single exchange protocol to transfer information. Site - a set of individual web pages that are linked by links and a single design.

               The World Wide Web

               - from the English. The World Wide Web (WWW) is a distributed system that provides access to related documents located on various computers connected to the Internet.

               Internet

               - a set of networks that use a single exchange protocol to transfer information.

               Site

               - a set of individual web pages that are linked by links and a single design.

               By default, the text of the term is pressed to the left edge of the browser window, and the description of the term is positioned below and shifted to the right.

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

               

               Web browsers also specify how bullet 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 some sophisticated HTML / CSS workarounds.

               

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

               The whole secret has two parts: first, completely hide the standard (default) numbers from the numbered list, and second, use the :: before pseudo-element to add those numbers back.

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

               1. This is the first item
               2. This is the second item
               3. This is the third element
               4. This is the fourth element
               5. This is the fifth element
               6. This is the sixth element

               < ol class = "custom-counter" > < / ol >

               If you just use tag selectors like ol or li, you end up with the same look and feel for all numbered lists on the page.

               2. Cancel the default view of the list marker... First, you need to make sure that the browser does not add a default look and feel 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 padding and others use the padding property, you need to reset both of these properties.

               3. Give a name to the counter-increment property of the list items... CSS has a property 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 by using the :: before pseudo-element (which we will do in the next step). Here's a simple code example for specifying a counter name:

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

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

               In this example, the name step-counter does not mean anything special. It is neither a value for a CSS property, nor anything else. This is just a name that we will use in what follows. You can think of 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 :: before pseudo-element allows you to insert content in front of an element. In our case, it will insert content before the list item. You use the CSS content property to tell the browser what content it should place at the beginning of the list item. These can be real words or something automatically generated by the browser.

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

               Of course, this is what browsers usually do. However, using the :: before pseudo-element we can also style these numbers, which would not be possible with standard numbered list items. Basically, all the other properties in the rule above are used to just create a cool look for the spinner (like background color, rounded corners, different font color, etc.). These styles show just some of the ways to change the appearance of numbers in numbered lists. And you can do even more, so feel free to use 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

               If it is necessary to number something on the site, an ordered list is most often used (

               ). It is reasonable to expect that you might be tempted to work on the design of these numbers. In CSS, however, it is quite problematic to realize this desire, but, fortunately, not impossible. Roger Johansson shows in his tutorial how this can be done with the: before pseudo-element, which can be set to counter for the content property.

               The: before pseudo-element is applied to display the desired content before the element to which it is added. Works in conjunction with the content property.

               It is worth making it clear, however, that numbered counters can be applied to more than just ordered lists. For example, suppose you wanted to number the definition list (

               ), which consists of questions and answers for your FAQ.

               The markup will look something like this:

               How much wood would a wood chuck chuck if a wood chuck could chuck wood?

               1,000,000

               What is the air-speed velocity of an unladen swallow?

               What do you mean? An African or European swallow?

               Why did the chicken cross the road?

               To get to the other side

               Every new

               the element is a new question, so we will apply the numbering to them. It will look very simple:

               The content property allows you to insert generated content into the text of the web page that is not originally in the text.
               Counter value Displays the value of the counter specified by the counter-reset property.

               The counter-reset property sets the identifier for the counter and sets the initial value.
               The counter-increment property specifies the increment to increment the counter value.

               Faq (counter-reset: my-badass-counter;) .faq dt: before (content: counter (my-badass-counter); counter-increment: my-badass-counter;)

               Any style can be assigned to the: before pseudo-element. For example:

               

               Having mastered this property, you can number whatever you want. The other day, for example, I posted one of my favorite recipes and numbered each step / photo with Roman numerals. This served as a reminder to me: numbers don't have to be decimal.

               

               Numeric varieties are represented as values ​​of the list-style-type property.
               Namely:

               

               All that is required is to indicate the desired option in the value of the counter.

               Content: counter (my-counter, lower-roman);

               The future of CSS3

               The above material is relevant for today, however, it pales in comparison with the possibilities that are hidden in CSS3 lists. As soon as browsers support them, it will be possible, for example, to work with list markers directly.

               Li :: marker (width: 30px; text-align: right; margin-right: 10px; display: inline-block;) ol (list-style: symbols ("*" "2020" "2021" "A7"); ) ul (list-style-type: "there must be an asterisk here)"; )

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

               , which is used to create the list. Each item in a numbered list is indicated by a tag
               1. as shown below.
                  1. First point
                  2. Second point
                  3. Third point

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

                  , then the default is a list with Arabic numbers (1, 2, 3, ...), as shown in Example 11.3.

                  Example 11.3. Create a numbered list

                  Working with time

                  1. creation of punctuality (you will never be late for anything);
                  2. recovery from punctuality (never rush anywhere);
                  3. changing the perception of time and hours.

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

                  Rice. 11.3. Numbered list view

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

                  The following values ​​can be used as numbering elements:

                  • Arabic numbers (1, 2, 3, ...);
                  • uppercase Latin letters (A, B, C, ...);
                  • lowercase latin letters (a, b, c, ...);
                  • uppercase roman numbers (I, II, III, ...);
                  • lowercase roman numbers (i, ii, iii, ...).

                  The type attribute of the tag is used to indicate the type of the numbered list.

                  ... Its possible values ​​are given in table. 11.2.
                  Tab. 11.2. Types of numbered list

                  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
                  Uppercase roman numbers		I. Cheburashka II. Crocodile Gena III. Shapoklyak
                  Lowercase roman numbers		i. Cheburashka ii. Crocodile Gena iii. Shapoklyak

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

                  ... It does not matter what type of list is set using type, the start attribute works the same with Roman and Arabic numbers. Example 11.4 shows how to create a list using uppercase roman numerals starting with eight.

                  Example 11.4. List numbering

                  8. King Magnum XLIV
                  9. King Siegfried XVI
                  10. King Sigismund XXI
                  11. King Husbrandt I

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

                  

                  Rice. 11.4. Numbered list with roman numbers