web-dev-qa-db-fra.com

nième enfant pour chaque deux lignes de la table

J'ai besoin de faire en gris toutes les deux lignes de ma table et je préférerais utiliser nth-child si possible.

Je me suis amusé avec le testeur de Chris, Coyier mais je ne peux toujours pas l'obtenir.

J'ai besoin de la formule suivante:

1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey

etc. Je préférerais ne pas mettre un cours en html car je suis sûr que ce sera une suggestion de certains. S'il existe un moyen de résoudre ce problème avec votre enfant, c'est ce que je recherche.

csscss3css-selectors
23
brianrhea

Réalisez que vous faites des groupes de 4, alors vous pouvez voir que vous pouvez avoir tous les 4 éléments et tous les 4 éléments moins un blanc, puis tous les 4 éléments moins deux ou tous les 4 éléments moins 3 gris.

Donc, vous utiliseriez 4n et 4n-1, puis 4n-2 et 4n-3:

div:nth-child(4n), div:nth-child(4n-1) {
    background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
    background: blue;
}

Ce code n'est pas précis pour votre cas, je l'ai écrit pour un preuve de concept jsFiddle .

Attention, gardez à l'esprit que nth-child ne fonctionne pas dans IE8. Problème typique, bien sûr.

81
Eric

La réponse de @ Eric est tout à fait exacte - mais si vous voulez facilement étendre cela aux groupes de 3, 4, 5, etc., et que vous utilisez Sass, voici le code (si vous voulez plus de groupes, augmentez simplement $largestGroupSize):

.table-with-grouped-rows {

    // generate styles for .groups-of-2, .groups-of-3, etc.
    $largestGroupSize: 6;
    @for $groupNumPerColor from 2 through $largestGroupSize{

        $totalGroupNum: $groupNumPerColor * 2;

        &.groups-of-#{$groupNumPerColor} {

            $start: $totalGroupNum - 1;
            $end: $groupNumPerColor;
            @for $primaryBgIndex from $start through $end {
                $nthString: #{$totalGroupNum}n - #{$primaryBgIndex};

                > tbody > tr:nth-of-type(#{$nthString}) > td {
                    background-color: $white;
                }
            }

            $start: $groupNumPerColor - 1;
            $end: 0;
            @for $alternateBgIndex from $start through $end {
                $nthString: #{$totalGroupNum}n - #{$alternateBgIndex};
                > tbody > tr:nth-of-type(#{$nthString}) > td {
                    background-color: $light-gray;
                }
            }
        }
    }
}

Et puis dans votre balisage, sur l'élément <table>, vous ajouteriez simplement les classes table-with-grouped-rows et groups-of-{n}. Par exemple, si vous voulez une table avec des groupes de 3, écrivez:

<table class="table-with-grouped-rows groups-of-3">

Boom.

1
jbyrd

Voici ce que j'utilise pour aligner à droite la première colonne de chaque tableau.

table td:nth-child(2n-1) {
    align: right;
    text-align: right;
}
1
bob