How can I get every second element if each is embedded in another one?

Question

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

How can I style every second class views in pure css.

In jquery I would do

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

But how can I do this CSS?

Answer 1

You can use the :nth-child property for this:

Example:

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

:nth-child(2) would select only the second item, while :nth-child(2n) will select every second item.