css - それぞれが別の要素に埋め込まれている場合、どのようにして2番目の要素を取得できますか?

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>

純粋な css で 2 つおきのクラス ビューのスタイルを設定するにはどうすればよいですか。

jqueryで私はするだろう

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

しかし、どうすればこのCSSを行うことができますか?

Answer 1

:nth-childこれにはプロパティを使用できます。

例：

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

:nth-child(2)は2 番目の項目のみを選択しますが、 はすべて:nth-child(2n)の項目を選択します。

Answer 2

キーワードで:nth-childセレクターを使用できます。even

.question_container:nth-child(even) .views{
    /* styles for every second class */
}

奇数または偶数の子を選択するという些細なケースでは、:nth-child(1n)norを使用しません。:nth-child(2n)これらは完全に有効ですが、キーワードoddandほど明確ではありませんeven。特に日常的に CSS を使用しない人にとっては。

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