Comment puis-je obtenir à chaque seconde si chaque élément est incorporé dans un autre?

<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>

Comment puis-je style à chaque seconde classe vues en pur css.

En jquery je ne

$('*[class=views]:even').addClass('views');

Mais comment puis-je faire cela en CSS?

OriginalL'auteur yehuda | 2012-06-07

  1. 18

    Vous pouvez utiliser le :nth-child propriété:

    Exemple:

    .question_container:nth-child(2n) .views{
    color: red;
}

    :nth-child(2) sélectionnez seulement le deuxième élément, tandis que l' :nth-child(2n) sélectionnera chaque deuxième élément.

    En fait je pense que ton code serait seulement le style (le deuxième) de l'élément, mais l'OP demandé pour tous deuxième élément, et à cet effet, le CSS doit être: .question_container:nth-child(2n) .views
    merci, il a travaillé avec Andrej 2n pas 2. Changement et je l accepte. Merci pour votre aide
    merci pour la correction 🙂
    Votre code ne fonctionne pas: jsfiddle.net/a9S86
    s'il vous plaît fermer la .question_container DIV jsfiddle.net/a9S86/1

    OriginalL'auteur sandeep

  2. 0

    @Andrej et @sandeep dit, il ne fonctionne pas:

    <style>
.question_container:nth-child(2n) .views{
    color: red;
}
</style>

<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>
<div class="question_container">
    <div class="views">
        <div>10</div>
    </div>
    <div>Something else</div>
</div>

    https://jsfiddle.net/pxmqc1au/

    OriginalL'auteur Mike

  3. 0

    Eh bien, vous pouvez faire la boîte, à avoir la moitié de la largeur (50%) ?
    Avoir flotté vers la gauche, puis claire sera la meilleure solution

    HTML:

    <div class="legend-box">
  <div class="box"> [] box 1 </div>
  <div class="box"> [] box 2 </div>
  <div class="box"> [] box 3 </div>
  <div class="box"> [] box 4 </div>
  <div class="box"> [] box 5 </div>
  <div class="box"> [] box 6 </div>
  <div class="clear"></div>
</div>

    CSS:

    .box {
  display: inline-block;
  width: 50%;
  float: left;
}

.clear {
  clear: both;
}

    Ici est un violon:
    https://jsfiddle.net/r5xq9von/

    OriginalL'auteur MRadev