CODEWITHSUNDEEP
htmlcsscss-selectors
Black Dynamite
Black Dynamite

Reputation: 4147

Create CSS for first table row, alternate others

I've got a table that is generated from another application/service that I am not able to modify the layout of. I would like to have CSS where the first row has a style, and then the other rows have alternating styles. The major issue is that there are no differences in the html concerning the header and other rows.

<table id="t01">
  <tr>
    <td>Firstname</th>
    <td>Lastname</th> 
    <td>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

I've seen things in CSS like table > tr:n-child(odd) but those don't work. Is there a way for me to say "tr:nth-child(ODD EXCEPT WHEN = 1)" ?

Any help is greatly appreciated. Here is a snapshot of what I'm trying to accomplish.

enter image description here

EDIT: SOLUTION

This was the solution I settled on. The key was to put the first-child selector after the nth-child(2n + 1) selector so the header style would override the iterative style. I might look into the :not selector, but I wanted to get rolling again.

div#tablewrappingdiv> table > tbody tr:nth-child(2n+1) > td{
    background-color: #eee;
}
div#tablewrappingdiv> table > tbody > tr:first-child > td{
    background-color: #006c00;
}           
div#tablewrappingdiv> table > tbody > tr:nth-child(2n + 2) > td{
    background-color: #d8e4bc;
}

Upvotes: 2

Views: 1586

Answers (3)

Malte Hartwig
Malte Hartwig

Reputation: 4555

Take a look at the Selector Reference for nth-child:

tr:first-child     {darkgreen}  (nth-child(0) would also work)
tr:nth-child(2n+2) {white}
tr:nth-child(2n+3) {lightgreen}

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

See it in action here: https://jsfiddle.net/z8xhs0h1/

For this rather simple case (even/odd, first different), take a look at this answer. It is slightly easier to read and says that you just have to put the first-child rule last:

tr:nth-child(even) {white}
tr:nth-child(odd)  {lightgreen}
tr:first-child     {darkgreen}  (overrides white color)

Still, for more complicated cases or in case you want to be very explicit, the an+b rules can be quite flexible.

Upvotes: 6

Johannes
Johannes

Reputation: 67738

You can use tr:first-child, tr:nth-child(2n+2) and tr:nth-child(2n+3) as shown below, where "nth-child(2n+3)" means "every second child starting from the third one":

tr:first-child {
  background: #fa0;
}

tr:nth-child(2n+2) {
  background: #a0f;
}

tr:nth-child(2n+3) {
  background: #0eb;
}
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Upvotes: 1

user7207170
user7207170

Reputation:

You could also make use of something like this.

  • We need to alternative the even and odd rows, using the nth-child(even/odd) selectors is pretty appropriate here.

  • And since we want to exclude the first row (which is an odd number) you can just use the :not(:first-child) selector with the odd attribute.

#t01 tr:first-child{
background:yellow;
}
#t01 tr:nth-child(even){
background:red;
}
#t01 tr:nth-child(odd):not(:first-child){
background:green;
}
<table id="t01">
  <tr>
    <td>Firstname</td>
    <td>Lastname</td> 
    <td>Age</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Upvotes: 3

Related Questions