First, last child and jquery

Hello!

I’m trying to style a table and I was going to use “first-child” and “last-child” to style portions of my table in specific ways.

For example:

<html>
.special td:first-child {
border-left: 1px solid #000;
}

.special tr:first-child td:last-child {
border-top: 1px solid #000;
}</html>

This is my first experience using these CSS selectors, and after a cursory search online, it seems that there are some browser related issues. Is there a jQuery solution that would work, regardless of the browser?

Thank you,

Eric

You can use the above selectors in jQuery without any issue, instead of using an inline style for instance you could simply create a CSS class and append it to the elements you need. See the below example:

CSS

.special-td-first { border-left: 1px solid #000; }
.special-td-last  { border-top: 1px solid #000; }

jQuery

$('.special td:first').addClass('special-td-first');
$('.special tr:first td:last').addClass('special-td-last');

Thanks for the quick reply!

It makes total sense.

:slight_smile: