2009-06-11 2 views

Répondre

3

Merci à tous,

Voici la version javascript que je finalement utilisé pour cette Solutions.

<script> 

    $(document).ready(function(){ 
    $("ul li:last-child").addClass("last"); 
    $("ul li:first-child").addClass("first"); 

    }); 
    </script> 
10

Vous pouvez utiliser un nom de classe sémantique pour atténuer vos souffrances dans IE6. Quelque chose comme:

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

Et puis dans l'utilisation de CSS:

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

Ceci est certainement une solution rapide où les éléments de votre enfant ne changent pas beaucoup (ou pas du tout). – noluckmurphy

+0

Belle solution sans JS. assez intelligent. +1 –

+0

ce n'est pas une solution, car, si vous utilisez firts-child ou last-child, vous ne pouvez probablement pas ajouter de manière statique une classe spécifique –

3

Il y a une solution exacte qui ne nécessite pas de modifications à votre code HTML. Utilisez Microsoft "Styles dynamiques". Voici un exemple:

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

Voir aussi http://mauzon.com/pseudoclasses-first-child-and-last-child-for-ie6/.

Questions connexes