css - first-child and last-child with IE8

Question

Welcome To Ask or Share your Answers For Others

css - first-child and last-child with IE8

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:45:32+0000

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.

Categories

css - first-child and last-child with IE8

css - first-child and last-child with IE8

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags