Как я могу получить каждый второй элемент, если каждый из них встроен в другой?

<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>

Как я могу стилизовать каждый второй класс в чистом css.

В jquery я бы сделал

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

Но как я могу сделать этот CSS?

Ответ 1

Для этого можно использовать свойство :nth-child:

Пример:

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

:nth-child(2) будет выбирать только второй элемент, а :nth-child(2n) будет выбирать каждый второй элемент.

Ответ 2

Как сказал @Andrej и @sandeep, он работает:

<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/

Ответ 3

Ну, вы можете сделать поле, чтобы иметь половину ширины (50%)? Если они будут перемещаться влево, а затем очистить будет лучшим решением

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;
}

Вот скрипка: https://jsfiddle.net/r5xq9von/