Tutorial :Is there any Fix for child selector in IE6



Question:

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.


Solution:1

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; }  


Solution:2

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>  


Solution:3

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


Solution:4

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
Previous
Next Post »