Cascading Style Sheets - HTML5 with Visual Studio 2012 - page 97

Figure 4-13. The shadow on the sidebar images
Using Zebra Striping
One styling approach that has been used for a long time is to alternate the background when there is a list of
items, which is sometimes referred to as zebra-striping . This goes back to the old blue-bar paper used to enter
accounting journals. The alternating backgrounds make it easier to distinguish between each item. Prior to CSS3
this was accomplished with JavaScript that would programmatically change the background on every other
element.
CSS3 introduces the nth-child selector which is perfect for this application because it returns every n th
element. Using this with n set to 2 will return every other element. Add the following code to the end of the style
element:
/* Stripe the title list */
#titles article:nth-child(2n+1)
{
background: #c0c0c0;
border: 1px solid #6699cc;
border-radius: 10px;
}
#titles article:nth-child(2n+0)
{
background: #6699cc;
border: 1px solid #c0c0c0;
border-radius: 10px;
}
This rule uses a complex selector, #titles article:nth-child(2n+1) , that first selects the # titles
element. This is a section element that contains the topic titles. Each book title is in a separate article element.
he article:nth-child selector then return every nth article element inside the #titles element. The 2n+1
parameter may seem a bit odd, however. To get every other element, you specify 2n as the parameter, which
would return the odd items (first, third, fifth, and so on). By using 2n+1, the list is offset by 1 so you will get the
even items (second, fourth, sixth and so on). So the first rule formats the even items and the second rule, which
uses 2n+0, will format the odd items. You could simply use 2n instead of 2n+0 as these are equivalent but I like
using 2n+0 for consistency. The only difference between these two style rules is the background and border
colors. The effect is shown in Figure 4-14 .