Home/ Questions/Q 720421
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T05:45:22+00:00

I have an ordered list in HTML. I would like to add styling only

  • 0

I have an ordered list in HTML.
I would like to add styling only to the numbers (1,2,3,…), and not to the list items themselves.

Is there a way to refer to these numbers ?

Thanks !

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS2 provides for control over generated content, which will let you style the auto-generated content independently of the rest of the item using the :before pseudoclass. Here’s a solution that meet’s the OP’s follow-up criteria (background color on the list enumerator but not the item).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head profile="http://gmpg.org/xfn/11">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

    body { margin: 0; padding: 10px; }
    ol {
        counter-reset: item; 
        margin: 0;
        padding: 0;
    }
    li {
        display: block;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }
    li:before { 
        content: counter(item);
            /* 
                To generate punctuation after the number, just precede or follow with a string: 
                content: "Chapter " counter(item) " >> ";  

                To make nested counters (1, 1.1, 1.1.1, etc.), use:
                content: counters(item, ".");
            */
        counter-increment: item; 

        background-color: #ddd;
        margin-right: 15px;
        padding: 10px;
    }
    ol li ol { margin-bottom: -10px; padding-top: 10px; }
    ol li ol li { margin: 10px 0 0 30px; }

    </style>
</head>

<body>

<ol>
    <li>Turtles</li>
    <li>Lizards
        <ol>
            <li>Salamanders</li>
            <li>Geckos</li>
        </ol>
    </li>
    <li>Velociraptors</li>
</ol>

</body>
</html>
    • 0