Style last element with css last-child selector
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.
Browser Support
IE - 8+
Firefox - 31+
Chrome - 31+
Opera - 29+
Safari - 7
iOS - 7.1+
Opera Mini - 8
Android - 4.1+
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.
<html>
<head>
<style type='text/css'>
table tr:last-child td:last-child { border:1px solid red; }
</style>
</head>
<body>
<table>
<tr>
<td>row1-cell 1</td>
<td>row1-cell 2</td>
<td>row1-cell 3</td>
</tr>
<tr>
<td>row2-cell 1</td>
<td>row2-cell 2</td>
<td>row2-cell 3</td>
</tr>
<tr>
<td>row3-cell 1</td>
<td>row3-cell 2</td>
<td>row3-cell 3</td>
</tr>
</table>
</body>
</html>
OutputBrowser Support
IE - 8+
Firefox - 31+
Chrome - 31+
Opera - 29+
Safari - 7
iOS - 7.1+
Opera Mini - 8
Android - 4.1+
Comments (0)