Search code examples
csshtml-tablebackground-color

Alternative coloured table rows in css

I'm trying to modify our Cruise Control .NET system to change the background colour on alternative rows of the build status page.

The cruisecontrol.css file contains the following for the build status table.

tr.buildStatus table
    {
    	margin-left: 20px;
    }
    tr.buildStatus td
    {
    	font-style: italic;
    	border: none;
    	text-align: left;
    }
    
    
    /* Adding this affects ALL tables and looks bad */
    tr.buildStatus:nth-child(even) {background: #CCC}
    tr.buildStatus:nth-child(odd) {background: #FFF}
    
    /* I tried this, but it didn't affect the table */
    tr.buildStatus:nth-child(even) { background: #CCC }
    tr.buildStatus:nth-child(odd) { background: #FFF }

I'm a little confused with how selectors work. How do I get it to apply to the BuildStatus table?

Solution

  • Try adding table

    table tr.buildStatus:nth-child(even) { background: #CCC; }