Years ago, I created a list of my public speaking. In order to make it more readable, I added a bit of jQuery to style alternating rows with a light gray color. I used jQuery because, at that time, CSS did not support the ability to apply a style to every other row in a table.

I liked the results, but the code always struck me as awkward.

image

Eventually, CSS3 provided this ability, but not every browser immediately supported this style. So I waited. And then, I forgot about it. It was slow, but it worked.

It has been a few years and I had a bit of time, so today I removed the jQuery reference and JavaScript from this page and achieved the same results using the CSS

Here is the table opening tag. I applied a style to it only to make it easy to find, in case there are other tables on the same page.

 class="tiger-stripe">
  

Each row has no background-color styling, because I applied that later. Here is a sample row.

  style="height:15.0pt">
  
   Jun 11, 2018
  
  
   Building and Training your own Custom Image Recognition AI
  
  
   Norwegian Developers Conference
  
  
   Oslo, Norway
  
 
  

Originally, I had all this within the page's :

 
 

 
  

I was able to accomplish the same results using the "even" argument of the "nth-child" selector. I replaced the code within the above with the following:


  

I decided to replace the table’s class (“tiger-stripe”) with an id (“presentationlist”), since the class only exists to identify this table. Strictly speaking, this was not necessary, but it felt cleaner this way. Here is the new table tag.

 id="presentationList">
  

Each row has no background-color styling, because I applied that later. Here is a sample row.

By eliminating the custom JavaScript and the jQuery reference, the code is much simpler and the page loads faster. I did not need to modify any HTML. CSS selectors take care of all the styling.

This is an example of using declarative programming, instead of imperative programming to accomplish a task. In other words, the new system tells the browser the results I want without explicitly specifying how I want it done.

You can see the results here