La variante de couleur des lignes de div dans le css

Je suis en train d'ajouter une alternative de couleur des lignes de div en utilisant nth-child(odd).

Je besoin d'ajouter de la couleur de remplacement pour la div qui a le nom de la classe alternative_cls mais pas à la div qui a les différents nom de la classe.

Mais le problème est qu'il n'est pas en ignorant le div avec une classe différente le nom, l'alternative est la couleur de l'application, y compris les différentes classe nommée div également.

Ici est la CODE VIOLON

Ce que je veux, c'est

La variante de couleur des lignes de div dans le css

  • mise à jour de la question. Je veux de la sortie comme indiqué dans l'image
  • salut je mettre à jour votre violon ici
  • ce n'est pas ce que je veux. J'ai besoin de donner le seul nom de la classe. en bref, couleur de remplacement devrait s'appliquer uniquement à la .alternative_cls div, il ne devrait pas envisager de le .no_bg div.
  • Le nth-child sélecteur correspond à la nième enfant, quel que soit le type d'élément ou de tout associé de la classe, de son parent.
  • Aucune des solutions ci-dessous a fonctionné pour vous?
  • nope. actuellement no_bg div peut venir de n fois dans le flux pas une seule fois, Alors j'ai besoin de la solution dynamique pour cibler uniquement les divs avec un nom de classe .alternative_cls
  • désolé, vous avez raison et j'avais tort.. j'ai fait quelques tests supplémentaires et mise à jour de ma réponse.. espérons que cela fonctionne pour vous
  • si elle ne fonctionne pas pour vous s'il vous plaît laissez-moi savoir pourquoi.. comme j'ai passé un bon moment sur la découverte et l'explication
  • je pense qu'il est sûr de dire que ma réponse est la bonne, un ce un

InformationsquelleAutor Sowmya | 2013-02-28
  1. 12

    ici, vous allez http://jsfiddle.net/Dfy59/6/

    explication:

    par définition un css n-th:child sélecteur de

    correspond à chaque élément qui est le n-ième enfant, indépendamment de son type, de son parent.

    donc, nous allons prendre votre code pour l'exemple (et supprimer le no_bg nœud en premier):

    .alternative_cls:nth-child(odd){
    background:#ccc;
}

    est appliquée comme suit:

    <div class="alternative_cls"> <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls"> <!-- alternative_cls(n)=4, even so don't apply = (transparent) -->
    ssf
</div>
..
etc

    la confusion se produit lorsque vous insérez un div avec une classe différente entre les deux, quand cela arrive, css compte toujours l'intrus div comme un frère ou une sœur de la .alternative_cls, mais alors ne pas appliquer le css pour elle:

    <div class="alternative_cls">  <!-- alternative_cls(n)=1, odd so apply = (grey) -->
    ssf
</div>
<div class="no_bg">  <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey) NOTE: you'd expect the nth-child selector to skip the last node.. but it didn't, which caused the confusion -->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so don't apply = (transparent) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd so apply = (grey)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so don't apply = (transparent) -->
    ssf
</div>

    de la façon que je savais c'est en regardant mon chrome dev tools et en jouant avec les sélecteurs jquery:

    $('.alternative_cls:nth-child(1)')

    retourne 

    [<div class="alternative_cls">
    ssf
</div>]

    mais (et c'est la partie qui est contre-intuitif)

    $('.alternative_cls:nth-child(2)')

    retourne 

    []

    vous vous attendez à ce sélecteur pour retourner le nœud immédiatement après la no_bg div.. mais il n'est pas!

    continue..

     $('.alternative_cls:nth-child(3)')

    retourne 

    [<div class="alternative_cls">
    ssf
</div>]

    (Je vous recommande de l'essayer vous-même pour que le concept s'enfoncer)

    aller autour de cela il vous suffit de mettre le css comme 

    .alternative_cls{
    width:100%;
    height:60px
}
.alternative_cls:nth-child(1), .alternative_cls:nth-child(even){
    background:#ccc;
}
.no_bg{
     width:100%;
    height:60px;
    background:#f8d6d6
}

    et ce qui se passe

    <div class="alternative_cls">  <!-- n=1, apply the nth-child(1) rule = (grey) -->
    ssf
</div>
<div class="no_bg">   <!--alternative_cls(n)=2, but don't apply alternative_cls, just apply no_bg = (pink) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls"> <!-- n=2, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>
<div class="alternative_cls">  <!-- n=3, odd, so don't apply any rule = (transparent)-->
    ssf
</div>
<div class="alternative_cls">  <!-- n=4, even so apply the nth-child(even) rule = (grey) -->
    ssf
</div>

    j'espère que cela le rend clair.. donc, avec cette connaissance, vous pouvez continuer à utiliser le nth-sélecteur d'enfant, vous avez juste à tenir compte de cette particularité

    • Sa se complique 🙂 de toute façon vos réponses donne une idée pour le faire d'une autre manière. Merci pour votre effort.
    • pas de probs homme.. btw merci de partager avec nous votre solution finale.. je suis curieux.. je peut même voter jusqu' 😉
    • J'ai ajouté une réponse. Chk il
    • Il n'est pas compliqué. Si un élément n'est pas un enfant de son parent, il n'est pas :nth-child(even). C'est tout. Il n'est pas n'importe quelle classe il a ou n'a pas.
    • Merci pour l'approbation @BoltClock..je considérer que ma réponse est la bonne :p
    InformationsquelleAutor abbood
  2. 3

    Est-ce de travailler pour ce que vous avez besoin?:

    .alternative_cls:first-child,
.alternative_cls:nth-child(2n){
  background:#ccc;
}

    jsFiddle

    InformationsquelleAutor earthdesigner
  3. 1

    J'ai déplacé le .no_bg div dans le .alternative_cls, n ow il fonctionne très bien.

    <div class="alternative_cls">
    ssf
    <div class="no_bg">
    ssf
</div>
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>
<div class="alternative_cls">
    ssf
</div>

    DÉMO

    • assurez-vous que marche aussi 🙂 +1
    InformationsquelleAutor Sowmya
  4. 0

    Comme déjà dit dans d'autres réponses, le nth-child sélecteur de compte childs, et c'est tout; vous ne pouvez rien faire pour changer cela.
    Vous pouvez prendre le div qui sont les causes de problèmes à l'extérieur du premier niveau de l'enfant, comme cela a déjà été dit.

    Si c'est un problème, une solution est de modifier cet élément à un autre type qui n'est pas div. Ensuite, vous pouvez utiliser div:nth-of-type(même) qui ne prend en compte que les divs.

    Une façon ou d'une autre, vous avez besoin de modifier votre DOM.

    InformationsquelleAutor vals