web-dev-qa-db-fra.com

: sélecteur nième enfant (pair / impair) avec classe

J'essaie d'appliquer des sélecteurs pairs/impairs à tous les éléments d'une liste avec le parent de classe.

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

enter image description here

Lien vers jsFiddle

Mais les couleurs se réinitialisent. Je veux que les éléments de la liste soient de la couleur du texte.

Y a-t-il un moyen de faire cela?

htmlcsshtml5css3css-selectors
19
nilsi

En général, ce que vous voulez n'est pas possible, mais il existe un moyen d'obtenir le comportement souhaité pour un nombre limité d'éléments "exclus": le combinateur général de frères et sœurs~.

L'idée est que pour chaque occurrence d'un non -.parent élément subséquent .parent les éléments verront leurs couleurs basculées:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

Voyez-le en action.

Bien sûr, il y a une limite à ce que l'on serait prêt à faire, mais c'est aussi proche que possible avec du CSS pur.

21
Jon

Il s'agit d'une perception erronée courante

Le :nth-child et :nth-of-type les sélecteurs ne regardent ni "classe" ni rien d'autre pour compter. Ils ne regardent que (1) tous les éléments, ou (2) tous les éléments d'un certain "type" (pas classe, pas un attribut, rien que le - type de l'élément --div ou li etc.).

Donc, vous ne pouvez pas l'ignorer avec du CSS pur sans connaître votre structure html exacte (et ensuite, seulement s'il y a en fait quelques éléments avec lesquels vous traitez - voir la réponse de Jon pour une telle manière, où vous devez savoir combien de non -les éléments parents avec lesquels vous traitez, et comme vous pouvez le voir et il note que les limites pratiques sont très petites), ou en utilisant javascript.

9
ScottS

Cela ne sera possible qu'avec les sélecteurs CSS 4 qui auront nth-match .

Dans le CSS existant, cela ne peut être fait que dans certaines situations limitées en utilisant les temps de multiplication du combinateur général, comme dans la réponse de @ Jon ou même d'une manière plus `` mécanique '' ( exemple ):

.parent,
.parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: green;
}

.parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: red;
}

En pratique, il me semble préférable d'utiliser JS/jQuery pour cela.

6
Ilya Streltsyn

CSS

L'autre moyen fiable de reproduire cela actuellement est avec le sélecteur de frère adjacent:

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }

Vous avez trois options:

  • Utilisez le sélecteur not(). Cela gardera votre surlignage indéfiniment, mais il inversera parfois l'ordre dans lequel il est mis en surbrillance . Utilisez cette option si votre liste peut contenir d'énormes regroupements d'éléments que vous souhaitez mettre en évidence.
  • Utilisez le sélecteur + (Frère adjacent). Cette option ne continuera pas de surligner indéfiniment , mais elle garantit que la commande ne sera jamais retournée. Utilisez cette option si votre liste comprendra de plus petits regroupements d'éléments en surbrillance.
  • Utilisez le sélecteur ~ (Tout frère ou sœur). Je ne recommanderais pas cela car la liste ne parviendra pas à surligner correctement en fonction de la longueur totale de la liste plutôt que du total des frères et sœurs correspondants . Cela échouera toujours avant les deux autres options, et plus encore.

Violon ici: http://jsfiddle.net/corymcd/kVcZJ/

N'hésitez pas à copier le HTML à partir de cela et à le coller dans ceux avec lesquels les autres personnes ont montré leurs méthodes.

jQuery

Comme indiqué précédemment, l'utilisation de quelque chose comme jQuery vous permettrait facilement d'affecter vos classes paires/impaires ou simplement de changer le style en ligne.

// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});

Violon ici: http://jsfiddle.net/corymcd/kAPvX

4
Corion