Nth-child reset

Bonjour à tous

Je rencontre une petite difficulté avec la pseudo classe nth-child dans un contexte responsive. Je dispose d’une liste (ul li) qui liste 5 éléments par lignes (sur n lignes), chaque élément à un contenu qui apparait au hover.
Afin d’éviter les débordements je souhaiterai positionner différemment le contenu affiché selon la disposition des éléments. Des captures écran seront surement plus claires que mon charabia :
Hover sur le premier élément :
http://terrapixa.fr/img/nth-child-01.jpg
Hover sur le 5eme élément :
http://terrapixa.fr/img/nth-child-02.jpg
Afin d’obtenir ce résultat j’ai écrit ces règles :

.liste-livres .livre:hover .presentation {
    z-index: 1000;
    display: block;
    position: absolute;
    top:180px;
    left: -55%;
    width: 215%;
    background: transparent url('/assets/images/tips-livre.png') 50% 0 no-repeat;    
    padding: 1em;
}
.liste-livres .livre:nth-child(5n+1):hover .presentation {
    left: 0;
    background-position: 79% 0 ;
}
.liste-livres .livre:nth-child(5n+5):hover .presentation {
    left: -200px;
    background-position: 18% 0 ;
}

Cela fonctionne très bien. En revanche ça se gâte pour les cas où le contexte responsive se réduit : Le nombre d’élément par ligne passe alors à 4 :
La règle deviens donc celle-ci :

@media (min-width: 970px) {
    .liste-livres .livre:nth-child(4n+1):hover .presentation {
        left: 0;
        background-position: 79% 0 ;
    }
    .liste-livres .livre:nth-child(4n+4):hover .presentation {
        left: -200px;
        background-position: 18% 0 ;
    }
 }

Cela fonctionne très bien pour le « contexte de base ». En revanche ça se gâte pour les cas où le contexte responsive se réduit : Le nombre d’élément par ligne passe alors à 4 :
Comment faire un reset clean des nth-child pour éviter l’héritage du positionnement ?

Par avance merci pour vos conseils
Modifié par clementv (17 Mar 2014 - 12:42)

Il faut que tu déclare tout ce qui concerne tes "nth-child" dans des @média :

@media (min-width: 970px) {
  body{
    background: red;  
  }
}
@media (min-width: 400px) and (max-width: 969px) {
  body{
    background: blue;  
  }
}
@media (min-width: 200px) and (max-width: 399px) {
  body{
    background: yellow;  
  }
}
@media (max-width: 199px) {
  body{
    background: green;  
  }
}

Modifié par thej8 (17 Mar 2014 - 13:57)

OK,

J'ai aussi cette solution :

@media (max-width: 970px) {
    .liste-livres .livre:nth-child(5n+1):hover .presentation,
    .liste-livres .livre:nth-child(5n+5):hover .presentation {
        left:0;
    }
    .liste-livres .livre:nth-child(4n+1):hover .presentation {
        left: 0;
        background-position: 79% 0 ;
    }
    .liste-livres .livre:nth-child(4n+4):hover .presentation {
        left: -200px;
        background-position: 18% 0 ;
    }
 }

Merci

Ta solution à l'avantage de gérer un comportement par défault pour les nav qui ne comprennent pas @media.
Modifié par thej8 (17 Mar 2014 - 14:32)