【CSS】:nth-child()の応用【2つの要素ごとに反映させたい】

Question

毎度ご相談させてもらっています。

今回は、CSSの:nth-childについてです。
:nth-childですが、奇数偶数ごと、最初だけ、最後だけの要素にと、
使い勝手の良い擬似要素ですが、下記のように組みたいがそういった指南ページが見当たらず
ご相談させてください。

見出しに背景をつけて、最初の２個の見出しは赤、後の２個の見出しは青
というように続けさせて表示させたいです。

×それぞれの見出しタグにひとつひとつ指定、というような事はしません。

何かいい手立てがありましたら、教えてください(_ _)

Answer 1

h2要素だけが連続しているなら、下記のCSSでOKですが、

h2 {
  background-color: #ad1452;
}

h2:nth-child(4n-1), h2:nth-child(4n){
  background-color: #2d4084;
}

h2 の後に p要素とか別の要素が続くなら :nth-child では難しいかと。:nth-of-typea
を使うといいでしょう。

h2 {
  background-color: #ad1452;
}

h2:nth-of-type(4n-1), h2:nth-of-type(4n){
  background-color: #2d4084;
}

Comments

[famous]

ご丁寧にありがとうございます。下の方とはまた違う表記で、表現できるのですね！奥深いですね。。
早速下の回答者様の回答と同様試してみて、なぜ効かないのだろう・・・と悩んでいたら、各見出しを段落で区切っておりました。Bootstrapも勉強しながら作っていてdivタグで囲むことが多いのですが、その場合って反映されないのでしょうかね。

Answer 2

:nth-of-type(4n+1)のような指定ができますので、それを使えばいいかと思います。

h2:nth-of-type(4n+1), h2:nth-of-type(4n+2){
  background-color: #BD4375;
}

h2:nth-of-type(4n+3), h2:nth-of-type(4n){
  background-color: #2D4084;
}

jsFiddleでの実装例

Comments

[maisumakun]

なお、:nth-childは全要素を通しで順番を数えますが、h2:nth-of-typeは同じ親に入っているh2の中での順序を数えます。

[famous]

ご丁寧にありがとうございます。早速試してみて、なぜ効かないのだろう・・・と悩んでいたら、各見出しを段落で区切っておりました。Bootstrapも勉強しながら作っていてdivタグで囲むことが多いのですが、その場合って反映されないのでしょうかね。

[maisumakun]

でしたら、「div:nth-child(even) h2」のようにしてみてはいかがでしょうか。

[famous]

ありがとうございます。試してみたのですが、うまくいかず悩んでいましたが、赤と青の見出し背景はそれぞれ大きな要素の背景が違ったので、個別で指定しました；
お時間割いてくださってありがとうございました。