Shading individual LI’s in a UL

[AlanKearns]

When I want to enclose one or more paragraphs in a tint box, I normally use a DIV, which uses padding to have the tint at the left and right margins, but bringing the text a few pixels in on either side.

What I’d like to do now, is to apply a tint box to specific items within an unordered list, which has its bullets at the left margin. But that means to enclose the bullet, the tint box would have to extend a few pixels to the left, and I’m having trouble making this work with negative values while also keeping all the bullets vertically aligned.

I was wondering what approach would be best to use, eg:

• DIV enclosing the LI tag(s)?
  
  Class of an LI tag?
  
  Starting a new unordered list every time a tinted area starts/ends, with the class applied to its UL tag, and visually matching the vertical spaces to make it look like one list?
  
  Any other CSS hacks I might not know about?

Best regards!

[Rene Severens]

Hi,

interesting challenge:

the next css:

ul.background > li.background:before:nth-child(odd)
{
background-color: green;
margin-right: 15px;
padding: 0 15px;
}

ul.background > li.background:before:nth-child(even)
{
background-color: red;
margin-right: 15px;
padding: 0 15px;
}

ul.background > li.nobackground:before:nth-child(odd)
{
background-color: green;
margin-right: 15px;
padding: 0 15px;
}

ul.background > li.nobackground:before:nth-child(even)
{
background-color: white;
margin-right: 15px;
padding: 0 15px;
}

ul.nobackground
{
list-style: disc;
}

li.background span.background
{
position: relative;
left: 20px; /* controls the space between bullet and text */
}

li.nobackground span.background
{
position: relative;
left: 20px; /* controls the space between bullet and text */
}

results in:

Result.png

To create the list:

Enter the text
Turn in into a UL
Put the text of each LI in a span (style span.background)A
Apply style span.background to UL and each LI

source.png

Maybe this helps?

Greetings,

René Severens

[AlanKearns]

Woah! CSS skills there - thank you!