Using inline styling to color list bullets differently than list items

Question

I’m using an internal CSS style sheet to define styles for my <ol> and <li> elements. However, for one list which I have, I’d like to use inline styling. I want the list elements to be one color (blue) and the list bullets to be another (red). If I was to use an internal style sheet, the following would accomplish this for the list in question:

<style>ol { list-style-type:upper-roman; color:blue; } ol li span { color: red; } </style>

But I can’t figure out how to do this using inline styling. I don’t want to style each <li>. This following works to apply just one color for everything:

<ol list-style-type:upper-roman; style="color:blue;"> <li><span>Apple</span></li> <li><span>Orange<span></li> <li><span>Pear<span></li> <li><span>Grape<span></li> </ol>

But I don’t know how to add in the part to the inline styling statement which in the inline style sheet is:

ol li span { color: red; }

in order to color the list items different than the bullets, without coding each list item itself.

Nopes. You can't. You have to use inline-styles for this aspect. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented May 5, 2016 at 14:53
Is that markup for email, that's why you should use inline styles? — AleshaOleg
– AleshaOleg, Commented May 5, 2016 at 14:56
That's the thing about inline styles, if the property doesn't get inherited by child elements, like color or you need to reverse an inherited value, then you're going to have to apply the style to each and every element the style is supposed to affect. — hungerstar
– hungerstar, Commented May 5, 2016 at 15:14
Thanks very much guys! Thanks @hungerstar. I'd upvote but I'm a relative newbie and am not able to yet. — coder77
– coder77, Commented May 6, 2016 at 14:14
@coder77 if my answer answered your question please accept it. — hungerstar
– hungerstar, Commented May 6, 2016 at 14:18

hungerstar · Accepted Answer · 2020-01-07 15:48:32Z

You're going to have to be very specific and deliberate. That's the way inline styles work. You apply them directly to each and every element. You can get away with some inheritance but if you need to override that inheritance then you'll have to manually override it for each and every element.

<ol style="color:blue; list-style-type:upper-roman;"> <li><span style="color: red;">Apple</span></li> <li><span style="color: red;">Orange</span></li> <li><span style="color: red;">Pear</span></li> <li><span style="color: red;">Grape</span></li> </ol>

Collectives™ on Stack Overflow

Using inline styling to color list bullets differently than list items

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related