<ol>
<li>test</li>
<li>test</li>
</ol>
will show as:
- test
- test
I want to have numbers coloured and text black!
I can edit the css, but I do not have access to the HTML.
views:
1057answers:
8
+7
A:
Not sure if this works but i think it should:
<li style='color: red;'><span style='color:black;'>test</span></li>
edit
If you cannot edit the html then I'm afraid it's not possible. If you could add javascript to the HTML (once in the head) then you could do it like this:
$(document).ready( function() {
$('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});
You will need the jQuery library for this.
Then in your CSS just set up a red and a black class with color:red/black declarations.
Pim Jager
2009-01-28 18:50:27
I wouldn't suggest inline-styles, but this is essentially the best option.
Jonathan Sampson
2009-01-28 19:17:51
Inline styles was just to show how to do it, you should of course use classes as I do in the javascript example.
Pim Jager
2009-01-28 20:09:45
FYI, on StackOverflow, responding with an answer to add more info to your question is frowned upon. You should edit your question (or comment) to clarify instead. Once you have more rep points, you'll also be able to add comments.
rmeador
2009-01-28 18:55:29
Agreed, but no reason to downvote for a common newbie's mistake.
Daniel Schaffer
2009-01-28 19:22:33
For the record, I haven't voted, up or down, for this answer... I was just trying to teach the new guy the ropes.
rmeador
2009-01-28 20:22:20
+4
A:
This should do what you're looking for:
http://archivist.incutio.com/viewlist/css-discuss/67894
HTML
<ol>
<li>1 some text here</li>
<li>2 some more text that can span longer than one line</li>
</ol>
CSS
ol { list-style: none; padding-left: 2em; text-indent: -1em;}
li:first-letter { float: left;
font-size: ??;
color: white;
background: orange;
line-height: 1.0; }
Except you'll want to change the color and background according to your design.
This next one is overkill, but gives you a great deal of information on how to style lists:
http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/
Adam Davis
2009-01-28 18:55:49
If the user turns off CSS, it's going to show the number twice, which won't be very good for screen readers. Also, this will only work for single digit numbers. As soon as the list has more than 10 items, only the first digit is going to change colour.
Rich Adams
2009-01-28 19:16:59
This however creates additional content in the HTML which is often not wanted.
Konrad Rudolph
2009-01-28 19:22:45
A:
To expand a bit on what others said, as well as additional question clarifications, there is no built-in way of doing this from CSS w/o touching the HTML. If you are looking to keep the HTML as clean and semantic as possible, I would do the styling using javascript, probably with a library like jQuery, to adjust the DOM so that the css can be more effective.
I would caution, however, using color to convey info. I'm not sure what the purpose of the colored numbers is, but using color to display information leaves colorblind users out of the loop and is a big no no for accessibility.
cdeszaq
2009-01-28 19:06:38
A:
From an answer to a similar question I found elsewhere:
Just as a side note, CSS3 will allow easy styling of list markers with the ::marker pseudo-element.
But for now it looks like you'd have to add the <span> to your html.
notruthless
2009-01-28 19:20:58
+5
A:
The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on IE7:
<html>
<head>
<style>
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item;
color: red; }
</style>
</head>
<body>
<ol>
<li> item
<li> item
<li> item
</ol>
</body>
</html>
kdgregory
2009-01-28 19:35:11
A:
This is easy, as long as you don't want to assign different colours to different list item numbers. No HTML modifications necessary. Might not work in 100% of browsers though..
ol {color:red;}
ol li {color:black;}
D. Starr
2009-01-28 19:51:00
A:
too bad you can't edit the html... how about js?
<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }
// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>
<style>
li {color: #DDD;}
li span {color: black;}
</style>
if not, maybe a good-enough solution would be
ol {background-color: #DDD;}
li {background-color: white;}
y34h
2010-10-08 04:44:47