CODEWITHSUNDEEP
csscss-selectors
clarkk
clarkk

Reputation: 1

How to select first and last TD in a row?

How can you select the first and the last TD in a row?

tr > td[0],
tr > td[-1] {
/* styles */
}

Upvotes: 188

Views: 344380

Answers (6)

SingleWebSolution
SingleWebSolution

Reputation: 1

You can use

table tr td:first-child { css here } for First Child and

table tr td:last-child { css here } for last Child.

Upvotes: -1

Christopher Chiche
Christopher Chiche

Reputation: 15345

If the row contains some leading (or trailing) th tags before the td you should use the :first-of-type and the :last-of-type selectors. Otherwise the first td won't be selected if it's not the first element of the row.

This gives: 

td:first-of-type, td:last-of-type {
    /* styles */
}

Upvotes: 5

Albaz
Albaz

Reputation: 935

If you use sass(scss) you can use the following snippet:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

Upvotes: 5

Francesco
Francesco

Reputation: 10870

You can use the following snippet:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

Using the following pseudo classes:

:first-child means "select this element if it is the first child of its parent".

:last-child means "select this element if it is the last child of its parent".

Only element nodes (HTML tags) are affected, these pseudo-classes ignore text nodes.

Upvotes: 21

Ajay Gupta
Ajay Gupta

Reputation: 2967

You could use the :first-child and :last-child pseudo-selectors:

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

Or you can use other way like

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

Both way are perfectly working

Upvotes: 19

James Allardice
James Allardice

Reputation: 166071

You could use the :first-child and :last-child pseudo-selectors:

tr td:first-child,
tr td:last-child {
    /* styles */
}

This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).

Upvotes: 417

Related Questions