<Ol> with Numbers Another Color

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>

How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

Here is a possibility using the counter-reset / counter-increment properties:

ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
    counter-increment:list;
    content:counter(list, lower-alpha) ". ";
    color:red;
}

see fiddle: http://jsfiddle.net/jRVH5/14/

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>

How to change background color of numbers in ordered list?

Based on the following article : Style Ordered List with CSS, if you have some HTML code like this :

<ol id="list">
  <li>
    <p>this is some text</p>
  </li>
  <li>
    <p>and some other text</p>
  </li>
</ol>

Then, using a CSS that looks like this :

ol {
  background: red;
}
li {
  background: white;
}
p {
  margin: 0px;
}

Might get you something like what you're asking for : here's the result I get (only tested with Firefox) :

_{(source: pascal-martin.fr)}

(There are more explanations on the article I linked to at the beginning of my answer)

EDIT after the comment : ooops, didn't see that part ; sorry :-(

Now that you have an ordered list, with a specific color as background for the numbers, you can plug-in some Javascript code, to change that color.

Considering that the <ol> tag I used here as id="list", you can change its background-color with the following portion of JS code :

document.getElementById('list').style.backgroundColor = 'blue';

After this is executed, you'll get something that looks like the following :

_{(source: pascal-martin.fr)}

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

How to create ordered list with different circle ring colors

See if this helps.

jsFiddle

body { background: white; }.listAddress {  padding-left: 0;  position: relative;}.listAddress:before {  content: "";  position: absolute;  z-index: -2;  left: 0;  top: 0;  bottom: 0;  width: 20px;  background: linear-gradient(to bottom, green, red);}.listAddress li {  counter-increment: step-counter;  list-style: none;  padding-bottom: 20px;  position: relative;  padding-left: 25px;  overflow: hidden;}.listAddress li:before {  content: counter(step-counter);  margin-right: 5px;  box-shadow: 0 0 0 100px white;  color: white;  border-radius: 50%;  position: absolute;  z-index: -1;  left: 0;  top: 0;  text-align: center;  width: 20px;  height: 20px;}

<ol class="listAddress">  <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>  <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>  <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>  <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li>  <li>365 W Northwest Hwy, Palatine, IL 60067, USA</li></ol>

How can I color an OL's number separately from its content without using pseudo-elements?

As mentioned in the accepted answer to the linked question:

The bullet gets its color from the text.

Technically speaking, this is because the list marker (the term given by CSS2.1 to mean the bullet or number) generates its own anonymous box that's a child of the principal list item box. This marker box will always inherit styles from the principal box where applicable.

There is no way to target just the list marker box, or prevent it from inheriting styles from the principal box, using CSS2.1.

---

It's interesting to note, however, that it was intended in CSS2.0 to allow the ::before and ::after pseudo-elements to display: marker, essentially allowing you to style them independently of the principal box of the element containing them (overriding list-style in the process). Unfortunately this feature was removed in CSS2.1, and I don't have any sources handy that explain why it was dropped.

Today, in CSS2.1, while you can still apply counter styles to ::before and ::after, you cannot make them act like real list markers. In both specifications, you weren't able to alter the values of the markers from within the markup either.

That said, while display: marker is no longer in CSS2.1, the concept of styling list markers is being revisited in the new Lists and Counters module, with the introduction of a ::marker pseudo-element designed specifically to target the list marker, allowing you to do something like this:

*, ::marker {
    background-color: white;
    color: black;
}

#too {
    background-color: black;
    color: white;
}

Of course, this doesn't work anywhere since it's just a proposal. Hopefully that will change someday, but it's always good to know that it's being considered.

Can you style ordered list numbers in javascript? If so, how?

While JS cannot directly alter the color of the marker as it's a pseudo element, not actually in the DOM, we can get it to set a CSS variable of the actual 'real' element and use that to change the color in the pseudo element.

#thelistitem {
  color: blue;
}

#thelistitem::marker {
  color: var(--color);
}

<ol>
  <li id="thelistitem">
    Hello there!
  </li>
</ol>
<button onclick="document.getElementById('thelistitem').style.setProperty('--color', 'red');">Click me</button>

---

Related Topics