Menu
My table (that works perfectly on Chrome, FireFox and Opera) is not displaying correctly on Internet Explorer.
The background remains white! (I am using IE-8)
CSS code:
/*My Table*/ .my_table{ border-collapse:collapse; font:normal 14px sans-serif,tahoma,arial,verdana; margin:5px 0; } .my_table th{ color:#fff; background:#5E738A; border:1px solid #3C5169; text-align:center; padding:4px 10px; } .my_table td{ color:#555; border:1px solid #C1CAD4; text-align:center; padding:2px 5px; } .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F5FA; } 
461
Use the querySelector() method to get the nth child of an element, e.g. document. querySelector('#parent :nth-child(3)') . The :nth-child pseudo class returns the element that matches the provided position.
The nth-of-type is very similar to the nth-child pseudo-class. The main difference is that it specifically considers the type of the element getting selected before checking any other logic. Let's use our example from above but apply nth-of-type instead.
The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
As a good workaround, jQuery has added this to their project and achieving this using JavaScript is acceptable:
For my CSS, I would have
.my_table tr.even{ background:#E6EDF5; } .my_table tr.odd{ background:#F0F5FA; } And I would use jQuery to do this:
$(document).ready(function() { $(".my_table tr:nth-child(even)").addClass("even"); $(".my_table tr:nth-child(odd)").addClass("odd"); }); 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
