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


Tags: css,css3

Problem :

Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.

Is there any way to do this without JS or something? I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.

The code I tried, as you can see in the fiddle:

Relevant HTML

<ol>
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>  
  <li>Hola</li>
</ol>

CSS I have tried (without success)

/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}


Solution :

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/


    CSS Howto..

    How do I handle modal dialog fadeout in jQuery UI?

    How to link HTML file to CSS in Windows Notepad (NOT NOTEPAD++) [closed]

    How to change css properties depending on parent, but with the same class name [closed]

    How do I implement this basic CSS for just one category?

    How do I get the tooltip background to extend or grow as I input more text?

    how to place image on image?

    How to use Effeckt.css?

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to rotate a picture using css and javascript

    My footer keeps moving after updating other parts of my code. How do i fix this?

    Slickgrid - How to add css at grid creation time?

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to conditionally adjust paddings using css only?

    How to use image tag in body of html instead of loading image from css?

    How to visually indicate current page in ASP.NET MVC?

    how to get the value of css style using jquery

    how to center image + text in an li Element

    How to set the jquery draggable with margin left?

    How to change the style/css of a tooltip?

    How would you explain CSS positioning to a human being?

    How to convert a 'div' into a dropdown using CSS/Jquery

    How to assign CSS to images which have specific extension, height and width?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    How to position element between two sections while also being responsive?

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How do I add custom fonts? [duplicate]

    How to edit jquery slider

    how to give css only the 1st label span?

    How at least approximately imitate col-md-1.5?

    How to target individually nested elements using CSS