Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

nth child Tutorial Selector Alternate Colors

Learn to create CSS alternating style logic for your elements by using the nth-child pseudo-class selector in your HTML documents. <!DOCTYPE html> <html> <head> <style> .myTable { width:100%; border-collapse:collapse; } .myTable td { padding:8px; border:#999 1px solid; } .myTable tr:nth-child(even) { /*(even) or (2n+0)*/ background: #A4D1FF; } .myTable tr:nth-child(odd) { /*(odd) or (2n+1)*/ background: #EAF4FF; } </style> </head> <body> <table class="myTable"> <tr> <td>Row 1 content</td> </tr> <tr> <td>Row 2 content</td> </tr> <tr> <td>Row 3 content</td> </tr> <tr> <td>Row 4 content</td> </tr> </table> </body> </html>
thumb

CSS Videos

Content Display Logic

Automatic Numbering Tutorial Element CounterHover Makes CMS Option Buttons Appear Tutorialnth child Tutorial Selector Alternate Colors