first-child and last-child with IE8
CssInternet Explorer-8Css SelectorsCss Problem Overview
I have some css for adjusting things in my table.
Here it is:
.editor td:first-child
{
width: 150px;
}
.editor td:last-child input,
.editor td:last-child textarea
{
width: 500px;
padding: 3px 5px 5px 5px;
border: 1px solid #CCC;
}
It works with Firefox, Safari and Chrome but not (at this time) with IE8.
I know the problem comes from the first-child and last-child but I'm not an expert.
Any idea how I can fixt it?
PS: I added <!doctype html> on top of my html document but nothing changed.
Css Solutions
Solution 1 - Css
If your table is only 2 columns across, you can easily reach the second td with the adjacent sibling selector, which IE8 does support along with :first-child:
.editor td:first-child
{
width: 150px;
}
.editor td:first-child + td input,
.editor td:first-child + td textarea
{
width: 500px;
padding: 3px 5px 5px 5px;
border: 1px solid #CCC;
}
Otherwise, you'll have to use a JS selector library like jQuery, or manually add a class to the last td, as suggested by James Allardice.
Solution 2 - Css
Since :last-child is a CSS3 pseudo-class, it is not supported in IE8. I believe :first-child is supported, as it's defined in the CSS2.1 specification.
One possible solution is to simply give the last child a class name and style that class.
Another would be to use JavaScript. jQuery makes this particularly easy as it provides a :last-child pseudo-class which should work in IE8. Unfortunately, that could result in a flash of unstyled content while the DOM loads.
Solution 3 - Css
If you want to carry on using CSS3 selectors but need to support older browsers I would suggest using a polyfill such as Selectivizr.js