This simple css tip helped me when i wanted to apply specific style on my table last td. I used last-child in css to achieve this result. Last-child selector supported in all modern browsers.

last-child selector in css can be used to target last element inside containing element to apply our styles. For example we have table of 3 rows and 3 columns and if want to set border to last <td> in the last row we can use this selector. Check out following example for clearer view.
<style type='text/css'>
table tr:last-child td:last-child { border:1px solid red; }
<td>row1-cell 1</td>
<td>row1-cell 2</td>
<td>row1-cell 3</td>
<td>row2-cell 1</td>
<td>row2-cell 2</td>
<td>row2-cell 3</td>
<td>row3-cell 1</td>
<td>row3-cell 2</td>
<td>row3-cell 3</td>

Browser Support

IE - 8+
Firefox - 31+
Chrome - 31+
Opera - 29+
Safari - 7
iOS - 7.1+
Opera Mini - 8
Android - 4.1+

Comments (0)
Leave a Comment

loader Posting your comment...