Ordered list with alternating background color

[Denisotope]

I would like odd items with a color background and even ones without. List in a div with border on all sides and some padding.

Unable to expand background color to include item number and reach div left and right borders. Thanks for your help!

http://codepen.io/anon/pen/KxBJm

[TheDoc]

The code you’re looking for is this:

list-style-position: inside;

But I also updated your CSS and markup to make things a little cleaner: http://codepen.io/anon/pen/giLfq

You can use `:nth-child(odd)` if you don’t need to support IE8 and below.

[Denisotope]

Hi TheDoc,

Thanks for your help. But I forgot to mention that the list position needs to be outside because my real items are much longer than the lorem ipsum used to explain my “case”… Outside position indents the items and I much prefer that. I modified my sample accordingly:

http://codepen.io/Denisotope/pen/irsKe

I deleted the box’s padding because it prevents the background from reaching the borders. To compensate I created classes (which will be reused) for h4 and p. Finally I added a left margin for the li, otherwise it doesn’t show. But that margin pushes the background. Any simple CSS solution? (My list goes into an EPUB and basic EPUBs don’t accept all CSS tricks!)

[Paulie_D]

http://codepen.io/Paulie-D/pen/CBywn

Pseudo elements again….so beware browser support.

>My list goes into an EPUB and basic EPUBs don’t accept all CSS tricks!

This is probably a deal breaker. Perhaps you might have mentioned it before.

[Denisotope]

Thanks Paulie. Since pseudo-elements/classes don’t work with EPUB 2, and until EPUB 3 is fully implemented, I better forget about alternating backgrounds. I will simply change the text color.

[wolfcry911]

How about something like [this?](http://codepen.io/wolfcry911/pen/wLDnE “”)

[Denisotope]

Thanks wolfcry911. Unfortunately text-indent doesn’t align properly. Also, EPUB 2 doesn’t accept pseudo-classes or pseudo-elements. Lastly, Kindle guidelines forbid negative values…

I really appreciate all your feedback. If I were developing only for iPad there would be no problem. But taking into account other devices and reading apps, it’s hopeless for now. Thanks again!

[wolfcry911]

@Denisotope, here’s one more try:
http://codepen.io/wolfcry911/pen/wLDnE

[Author]

Posts