How to Colour The List-Style-Type Auto-Generated Numbers

How to colour the list-style-type auto-generated numbers?

Well, the kicker is that the numbers are technically generated inside the <li>, so anything you do to the <li> will affect the number. From the spec:

"Most block-level elements in CSS generate one principal block box.
In this section, we discuss two CSS mechanisms that cause an element
to generate two boxes: one principal block box (for the element's
content) and one separate marker box (for decoration such as a
bullet, image, or number)."

Notice that both the marker box and the principal box belong to the
same element - in this case, the list item. Accordingly, we should
expect all <li> styling to apply to both the marker and the content.
This is also not surprising if you think about it as though the list
item itself is generating the numbering content (which effectively it
is doing in CSS terms). This is confirmed later on when the spec
continues:

"The list properties allow basic visual formatting of lists. As with
more general markers, a element with 'display: list-item' generates a
principal box for the element's content and an optional marker box.
The other list properties allow authors to specify the marker type
(image, glyph, or number) and its position with respect to the
principal box (outside it or within it before content). They do not
allow authors to specify distinct style (colors, fonts, alignment,
etc.) for the list marker or adjust its position with respect to the
principal box."

So because the marker belongs to the list, it is affected by the <li> styling and isn't adjustable directly. The only way to achieve a different styling for the marker is to insert a <span> inside the list item, and style the span with the properties you want to be different from the marker.

How to change the color of numbers in ordered list without using counter in css?

this question has some good answers. this one works without counters. Add an inner span with a different color.

<ol><li style='color: red;'><span style='color:black;'>test</span></li></ol>

Want to make the number on a ordered list a different color and size

Same technique, using nested spans to keep auto numbering, and allow to style numbers and text:

.preplist {  color: blue;  font-size: 16px;}.preplist2 {  color: red;  font-size: 24px;}.listobject {  color: green;  font-size: 10px;}

<div>    <ol>        <span class="preplist"><li><span class="listobject">test</span></li></span>        <span class="preplist2"><li><span class="listobject">test2</span></li></span>    </ol></div>

Can you style ordered list numbers?

You can do this using CSS counters, in conjunction with the :before pseudo element:

 ol {   list-style: none;   counter-reset: item; } li {   counter-increment: item;   margin-bottom: 5px; } li:before {   margin-right: 10px;   content: counter(item);   background: lightblue;   border-radius: 100%;   color: white;   width: 1.2em;   text-align: center;   display: inline-block; }

<ol>  <li>item</li>  <li>item</li>  <li>item</li>  <li>item</li></ol>

Applying CSS to ordered list - background colour under numbers?

Revised Answer: jsFiddle Pure CSS Solution

Here is a revised method that does not use the OP's original jQuery framework, a request that was not fulfilled in my previous answer. That method used existing jQuery to apply a span wrapper for the li element since direct HTML modification was not possible.

This new method uses CSS Pseudo selectors :before and :after along with CSS 2.1 counter function that can have it's number list stylized so that no jQuery wrapper is needed. In fact, the jsFiddle revision shows the numbers using Google @font-face font.

Using the CSS counter function is done by declaring a variable name to use in the ul element, then incrementing the counter in the :before element as well as using it as actual content.

Simple Example: jsFiddle CSS Counter

HTML:

<ul>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>    
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>
    <li>A numbered list that's stylized!</li>    
</ul>

CSS:

ul{
    list-style-type: none;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    width: 210px;
    height: 200px;
    overflow: auto;
    border: 3px solid royalblue;
    /* Setup the counter. */
    counter-reset: yourVariableName;
}
li:before{
    /* Advance the number. */
    counter-increment: yourVariableName;
    /* Use the counter number as content. */
    content: 'Item ' counter(yourVariableName) ': ';
    color: royalBlue;
    font-family: 'Impact';
}

More about CSS counters HERE.

My original dated answer that uses existing framework in OP's question is shown below.

---

I looked at your Question carefully and then looked at your webpage.

Here is the solution you need:
jsFiddle

To summarize, this are the replacement CSS Rules that make it work:

#secondary ol {
    color:#F60;
    margin-bottom:0;
    margin-left: 0px;   /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
    list-style-position: inside;  /* This will place the number on top and inside of the current color of li */
}

.notes{
    color:#333;
    width: 230px;
    heigh: 50px;
    display: inline-block;
    vertical-align:text-top;
}

Result:

---

Extra: This variant example emphasizes the numbers: jsFiddle

CSS Design for order list

Here is the solution.

ol li {  list-style-type: decimal-leading-zero;}
ol {  counter-reset: li;}
ol li {  list-style-type: none;  counter-increment: li;  position: relative;}
ol li:before {  content: counter(li, decimal-leading-zero) ".";  position: absolute;  left: -2.6em;  width: 2em;  text-align: right;  color: #f00;}

<ol>  <li>One</li>  <li>Two</li>  <li>Three    <ol>      <li>Three.One</li>      <li>Three.Two</li>    </ol>  </li>  <li>Four</li></ol>

Auto generate numbering list in HTML using CSS #Part II

Here's a pure CSS version which works in Chrome 26 and FF 20 (Haven't tested on other browsers). The change from your earlier question is that you don't need to reset your counter every time.

/* Don't reset every time!!! */
/* ol.inner {counter-reset:section;} */

ol.inner li {counter-increment:section;}
ol.inner li:before {content: counters(section,"") ". ";}

Auto generate numbering list in HTML using CSS

TRY

ol {counter-reset: section;  list-style-type:none;padding-left:0}
ol li:before {counter-increment: section;font-weight:700;content: counters(section, ".") ". "}
ul {counter-reset: section;  list-style-type:lower-alpha}
ul li:before {counter-increment: section; content: ""}

working DEMO

update

add counter-reset on ul for the next (inner) listings

 ul {counter-reset: section;list-style-type:lower-alpha}
 ul  li {counter-increment: section;}
 ul li:before {content: ""}

Working Fiddle

Read more on Using CSS counters

---

Related Topics