tags:

views:

60

answers:

2

How do I get a red color for the line items shown as a circle?

/* This maps to ul */
.rich-datalist {
    list-style: disc;
    list-style-position: inside; 
    margin: 6px 0 1px 0;
    padding-left: 18px;
}

/* This maps to li */
.rich-list-item {
    padding-top: 5px;
    padding-bottom: 15px;
    font-size: 13px;
}
+4  A: 

HTML bullet color is the same as the list item's color property:

.rich-datalist { color: red; }

If you need the bullet to be a different color than the text, the easiest way is to apply a left-aligned non-repeating background image of the bullet, and apply a left padding to the list item.

.rich-datalist { 
list-style: none;
}
.rich-datalist-item { 
background: transparent url('/path/to/red-bullet.png') no-repeat left center; 
padding-left: 20px;
}
kingjeffrey
I want the bullet to have a different color than the text. Is there a way to specify the color without using a background image in a simple fashion.
Samuel
You will have to insert a nested hook to style list item text separately from list items.
kingjeffrey
+2  A: 

This will one day be possible in CSS3, but until then the only way forward it to wrap the contents of each LI in another container, and style that, so:

HTML:

<ul>
<li><span>lorem</span></li>
<li><span>ipsum</span></li>
<li><span>dolor</span></li>
</ul>

CSS:

ul{color: red}
ul li span{color: blue}
graphicdivine