28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je cherche à utiliser le pseudo-selector nth-child mais je rencontre un problème.

Concrètement, je veux compter les élements par rapport à un parent commun (BODY par exemple), et non pas par rapport au parent direct de chaque element.



Voici pour l'exemple deux listes imbriquées :
Je cherche à rendre les lignes 1 et 9 rouge et les lignes 2 et 10 grises.
Edit : Le problème ici, c'est que les lignes 1 et 6 sont rouges et 2 et 7 sont grises...

Exemple live ici : http://jsfiddle.net/snrRc/2/

Est-ce possible selon vous ou devrais-je m'en remettre à javascript ?


<ul id="TEST">
    <ol>
        <ul>
            <li>1-1 (1)</li>
            <li>1-2 (2)</li>
            <li>1-3 (3)</li>
            <li>1-4 (4)</li>
            <li>1-5 (5)</li>
        </ul>
    </ol>
    <ol>
        <ul>
            <li>2-1 (6)</li>
            <li>2-2 (7)</li>
            <li>2-3 (8)</li>
            <li>2-4 (9)</li>
            <li>2-5 (10)</li>
        </ul>
    </ol>
</ul>


ul#TEST li:nth-of-type(8n+1)
{
    background-color: red;
}
ul#TEST li:nth-of-type(8n+2)
{
    background-color: gray;
}





Merci beaucoup !
Modifié par gaten (27 May 2013 - 14:59)
Tu pourrais combiner avec :nth-last-child(n), même chose que nth-child(n) mais à partir de la fin.
petites explications ici -http://www.css3create.com/nth-last-child
C'est vrai, merci pour cette idée mais j'ai besoin de faire un système dynamique. Il faut que ça marche avec 2 UL, 3 UL, n UL...

Avec nth-child et nth-last-child, je ne vais pouvoir influer que sur la première et la dernière liste.

Je pense que ce que je cherche n'existe pas en CSS. Je vais devoir me rattraper sur une fonction JS malheureusement.

Merci encore
salut,
je suppose que lorsque juliesunset parlait de :nth-last-child c'était par rapport aux <li> et non aux <ul>. Cela dit je te confirme que ce que tu cherches n'est pas possible vu que cela se référera toujours au conteneur et non au parent global. Il existe d'ailleurs un autre sélecteur parfois plus utile qui est "nth-of-type".
Mais dans le fond quelle est ta logique ? Qu'est-ce que tu cherches à traduire vraiment avec ce code ?