各h2タグに異なる背景画像を指定するには

Question

複数のsectionにそれぞれh2タグを配置している場合、
各h2タグに異なる背景画像を指定するにはどうしたらいいでしょうか。

構造は下記の通りです。

<seciton>
  <h2>1番目</h2>
  　<p>テキスト</p>
</seciton>
<seciton>
  <h2>２番目</h2>
 　 <p>テキスト</p>
</seciton>
<seciton>
  <h2>３番目</h2>
  　<p>テキスト</p>
</seciton>

背景画像の大きさや位置はどれも同じで、画像の種類のみが異なります。

下記の場合であれば、h2:nth-of-type()にて指定できると思います。

<section>
  <h2>1番目</h2>
　  <p>テキスト</p>
  <h2>2番目</h2>
    <p>テキスト</p>
  <h2>3番目</h2>
  　<p>テキスト</p>
</section>

ただし、冒頭の構造の場合、h2の親要素がそれぞれのsectionになるためnth-of-type()は使えないかと思います。

各h2タグに異なるclassを割り当てれば可能だと思いますが、それだとコードが長くなってしまう為、よりスマートなコードを書ければと思っています。

ご回答宜しくお願いします。

Answer 1

個々に違うということは一意になりえるのでh2に対して共通設定
h2#個別ID に個別設定を入れれば良いと思います。
違うところだけ変わるところだけ

Comments

[tnk_fuku]

ご指摘の通りにさせて頂きました。
ありがとうございました。

Answer 2

section:nth-of-type(n) h2 {
  /*ここに処理*/
}

Comments

[kyoya0819]

idやclassを振った方が楽だと思うけど