Tutorial :Is there any Fix for child selector in IE6


While using :first-child :last-child , in css its works fine in IE7, FF.

Is there any possible fix for this.

Use of Javascript is fine. If it works without javascript it would be great.


You can use a semantic class name to ease your suffering in IE6. Something like:

  <ul>      <li class="first">First Item</li>      <li>Second Item</li>      <li class="last">Last Item</li>    </ul>  

And then in your CSS use:

ul .first { color: #F00; }  ul .last { color: #00F; }  


Thanks all,

Here is the javascript version which I finally used for this Solutions.

  <script>      $(document).ready(function(){      $("ul li:last-child").addClass("last");      $("ul li:first-child").addClass("first");      });    </script>  


There's an exact solution that doesn't require changes to your HTML. Use Microsoft "Dynamic Styles". Here's an example:

<html>  <head>  <style type="text/css">  tr td:first-child {font-weight:bold; background-color:green;}  tr td:last-child {background-color:orange;}  tr td {_font-weight:expression(this.previousSibling==null?'bold':'normal'); _background-color:expression(this.previousSibling==null?'lightgreen':(this.nextSibling==null?'orange':''));}  </style>  </head>  <body>  <table>   <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>   <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>   <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>  </body>  </html>  

Also see http://mauzon.com/pseudoclasses-first-child-and-last-child-for-ie6/ .


A more generic library that fixes a bunch of IE inconsistencies is Dean Edwards' IE7: http://dean.edwards.name/IE7/

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »