HTML5 and CSS3: Building Responsive Websites

Styling alternating rows with the nth positional pseudo class

The positional-pseudo classes in CSS3 offers easy CSS solutions to problems that previously required annoyingly complicated solutions. Until very recently, to style alternating rows of a list or table, if you were fortunate enough to be able to work on a server with some sort of logic, you could at least iterate through a count in a list, or if unlucky, you had to manually numerate your rows.

Getting ready

The CSS3 solution is surprisingly simple. First, create your HTML list of values. This does not necessarily require a name-spaced class, as you might want this to be an universal style throughout your site:

 <ul> <li> I think, therefore I am </li> <li> I think before I act </li> <li> ...