Sélectionnez un enfant pair, à l'exclusion de l'enfant caché

Entre la ligne 2 et 3 est caché <div> . Je ne veux pas que l'on soit pris dans la odd/even css règle.
Quelle serait la meilleure approche pour obtenir que cela fonctionne? http://jsfiddle.net/k0wzoweh/

<style>
.box:not(.hidden):nth-child(even) {background: green}
.box:not(.hidden):nth-child(odd) {background: orange}
.hidden {display:none;}
</style>
<div class="wrap">
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box hidden">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
    <div class="box">xx</div>
</div>

Remarque: Il peut y avoir plusieurs hidden éléments.

source d'informationauteur caramba

12

Pseudo-sélecteurs de ne pas la pile, de sorte que votre :not n'affecte pas la :nth-child (et il n'affectent :nth-of-type etc.

Si vous pouvez recourir à jQuery, vous pouvez utiliser le :visible pseudo-sélecteur de là, même si ce n'est pas une partie de la CSS.

Si vous êtes à la génération du HTML et peut le changer, vous pouvez appliquer pair/impair avec la logique au moment de l'exécution, par exemple en PHP:
```
foreach ($divs AS $i => $div) {
    echo '<div class="box ' . ($i % 2 ? 'even' : 'odd') . '">x</div>';
}
```
Même essayer de faire quelque chose de délicat comme
```
.box[class='box']:nth-of-type(even)
```
ne fonctionne pas, parce que le pseudo-sélecteur n'a même pas de pile sur le sélecteur d'attributs.

Je ne suis pas sûr que il y a moyen de le faire uniquement avec du CSS, je ne peux pas penser à tout instant.
6

Depuis mes lignes sont masquées avec du js, j'ai trouvé que l'approche la plus simple pour moi était juste ajouter une supplémentaire caché la ligne après chaque ligne que je cache et supprimer les lignes masquées quand j'ai montrer la vraie lignes de nouveau.
2

Merci Joe (+1) pour désigner la css pseudo-sélecteur de règles et le code php qui je pouvait très bien utiliser 1:1 en jQuery qui ressemble à ceci:
```
var classToAdd = visibleBoxes%2 ? 'even' : 'odd' ;
$(this).addClass(classToAdd)
```
2

Masquer les lignes que vous souhaitez masquer l'appel .hide() pour chaque ligne de la table, puis d'appeler

$("tr:visible:même").css( "background-color", "" ); //effacer l'attribut pour toutes les lignes

$("tr:visible:même").css( "background-color", "#ddddff" ); //attribut de jeu, même pour les lignes

(ajouter le nom de votre table pour le sélecteur pour être plus précis)
(aide :même fait sauter la ligne d'en-Tête)
1

Comme @Fateh Khalsa souligné, j'ai eu un problème similaire et depuis que j'avais de manipuler mon tableau avec JavaScript (jQuery pour être précis), j'ai été en mesure de faire ce qui suit:

(Note: Ceci suppose l'utilisation de JavaScript/jQuery qui l'OP n'est pas de savoir si ou de ne pas être à leur disposition. Cette réponse suppose oui, il serait, et que nous voulons activer /désactiver la visibilité des lignes masquées à un certain point.)
- Enregistrements inactifs (identifié avec la classe CSS "hideme") sont actuellement visibles.
- Visiteur clique sur le lien pour masquer les dossiers inactifs à partir de la liste.
- jQuery ajoute "caché" classe CSS "hideme" les registres.
- jQuery ajoute une ligne vide à la table immédiatement après la ligne que nous juste se cacha, ajouter des classes CSS "caché" (il n'apparaît pas) et "skiprowcolor" donc, nous pouvons facilement identifier ces lignes supplémentaires.
Ce processus est inversé lorsque le lien est cliqué à nouveau.
- Enregistrements inactifs (identifié avec la classe CSS "hideme") sont actuellement cachés.
- Visiteur clique sur un lien pour afficher les dossiers inactifs à partir de la liste.
- jQuery supprime "caché" classe CSS "hideme" les registres.
- jQuery retire la ligne vide le tableau qui suit immédiatement la ligne que nous a juste montré, identifié par la classe CSS "skiprowcolor".
Voici le code JavaScript (jQuery) pour ce faire:
```
//Inactive Row Toggle
$('.toginactive').click(function(e) {
    e.preventDefault();
    if ($(this).hasClass('on')) {
        $(this).removeClass('on');                  //Track that we're no longer hiding rows
        $('.wrap tr.hideme').removeClass('hidden'); //Remove hidden class from inactive rows
        $('.wrap tr.skiprowcolor').remove();        //Remove extra rows added to fix coloring
    } else {
        $(this).addClass('on');                     //Track that we're hiding rows
        $('.wrap tr.hideme').addClass('hidden');    //Add hidden class from inactive rows
        $('.wrap tr.hideme').after('<tr class="hidden skiprowcolor"></tr>');
                                                    //Add extra row after each hidden row to fix coloring
    }
});
```
Le lien HTML est simple
```
<a href="#" class="toginactive">Hide/Show Hidden Rows</a>
```

Vous devez vous connecter pour publier un commentaire.