Pb de CSS avec une liste dynamique

Bonjour à tous

J'ai un petit souci avec CSS pour styler des items d'une liste dynamique.

La liste se présente comme suit :

<ul>
<li attr="idle"> premier item </li>
<li attr="idle"> deuxième item < /li>
<li attr="idle"> troisième item < /li>
<li attr="idle"> quatrième item < /li>
</ul>

L'attribut "attr" a la valeur initial "idle" mais cette valeur est changée en "active" par un clic souris de l'utilisateur.

Ainsi on arrive à des situations du genre :

<ul>
<li attr="active"> premier item </li>
<li attr="active"> deuxième item < /li>
<li attr="idle"> troisième item < /li>
<li attr="idle"> quatrième item < /li>
</ul>

Je voudrais :

- laisser le dernier item ( ici le 2 ème ) très visible ( opacity : 1 )
- passer les items déjà lus ( ici le premier) en masqué ( opacity < 1 )

J'ai essayé d'utiliser les pseudos classes :nth-of-type ou :nth child mais visiblement elles comptent
les enfants indépendamment de la valeur de l'attribut.

J'ai donc essayé une syntaxe du genre : li[attr="active"]:last-child mais cela n'a pas marché non plus.

Toutes vos idées sont les bienvenues même si elles sont spécifiques à Firefox.

Didier Courtaud

ca te sert à quoi attr ici ?