how to change the background color of first row in html table and all other rows alternate color


Tags: html,css

Problem :

I want to change the background color of first row and all the rest rows underneath it would be alternate color i.e. even odd concept. currently i am applying css for alternate color like this:

.table-striped tbody tr:nth-child(odd) td {
    background-color: #81DAF5;
}

.table-striped tbody tr:nth-child(even) td {
    background-color: #CEECF5;
}

.table-striped tbody tr.highlight td {
    background-color: #F2F5A9;
}

here, .table-striped is table class. So how can i change color for first row in different color like red.

output of above css:

enter image description here



Solution :

You could use the :first-child pseudo class, it's supported by all browsers.

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

Syntax element:first-child { style properties }

Added to your CSS:

.table-striped tbody tr:nth-child(odd) td {
  background-color: #81DAF5;
}

.table-striped tbody tr:nth-child(even) td {
  background-color: #CEECF5;
}

.table-striped tbody tr.highlight td {
  background-color: #F2F5A9;
}

.table-striped tbody tr:first-child td {
  background-color: #FF0000;
}

JSFiddle

Edit: As noted by wrick17, the added first-child rule should be placed at the bottom since it'll otherwise be overridden.


    CSS Howto..

    How to recreate eBay New Logo Page in HTML + CSS

    How to hide a parent div if an inner div has a certain class, with javascript

    Can't figure out how to set color for specific div's in the loop

    make the div (in css) to grow bottom-up? how?

    how to add class to razor form and give padding?

    How to apply gradient to element with correctly display in IE9?

    how can I make div have auto height according to content

    How can I change the colour of individual squares on this grid…?

    In HTML, how can I wrap a word at . (dot), just like it wraps at - (dash)?

    ASP.NET - How to include CSS only if it isn't alrealy included?

    How can I avoid div overflowing my container without using overflow:hidden?

    How to scale an element when it loads using only CSS?

    How to to select the last class or last of type in css

    How to precisely center bootstrap grid in html page?

    How to make CSS compatible with all browsers?

    How to get background colors with fullCalendar and Bootstrap

    How to give all divs same amount of space on each side

    How to choose fontstacks

    How to display thick line under header of sub menu using css

    How to write many functions in one JS function

    How to avoid css transformation(rotate) when removing class?

    How to make a responsive div stick to page edge

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    How to change tab key selection color with css? [duplicate]

    How to colorize an image in CSS?

    How do you overlay two divs and make them the same height?

    How to make horizontal division using html div tag and css

    wordpress submenu css show on parent active and child active

    How to make css jquery autofit navigation?

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”