first-child and last-child with IE8

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 internet-explorer-8 css-selectors

3条回答

我只想做你的唯一

2楼-- · 2019-01-16 18:03

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.

0人赞添加讨论(0) 举报

聊天终结者

3楼-- · 2019-01-16 18:19

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.

0人赞添加讨论(0) 举报

beautiful°

4楼-- · 2019-01-16 18:26

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

0人赞添加讨论(0) 举报

first-child and last-child with IE8

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间