Menu
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.
556
The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.
The :first-child: The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the <! DOCTYPE> must be declared for IE8 and earlier versions. The :first-of-type: The :first-of-type Selector is used to targeting the first child of every element of it's parent.
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.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
