Ответ 1
Для этого можно использовать свойство :nth-child
:
Пример:
.question_container:nth-child(2n) .views{
color: red;
}
:nth-child(2)
будет выбирать только второй элемент, а :nth-child(2n)
будет выбирать каждый второй элемент.
<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?
Для этого можно использовать свойство :nth-child
:
Пример:
.question_container:nth-child(2n) .views{
color: red;
}
:nth-child(2)
будет выбирать только второй элемент, а :nth-child(2n)
будет выбирать каждый второй элемент.
Как сказал @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>
Ну, вы можете сделать поле, чтобы иметь половину ширины (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/