Grow your CSS skills. Land your dream job.

Ordered list with alternating background color

  • # March 14, 2013 at 5:36 pm

    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

    # March 14, 2013 at 6:05 pm

    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.

    # March 15, 2013 at 11:28 am

    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!)

    # March 15, 2013 at 12:24 pm

    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.

    # March 15, 2013 at 1:14 pm

    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.

    # March 15, 2013 at 3:02 pm

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

    # March 15, 2013 at 4:15 pm

    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!

    # March 15, 2013 at 4:58 pm

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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".