CSSで上から〇個の要素を選択したい

Question

上から「〇個目」ではなく、上から「〇つの要素」をすべて選択する方法を知りたいです。

<!– ここから↓ –>
  <div class="sample"></div>
  <div class="sample"></div>
  <div class="sample"></div>
  <div class="sample"></div>
  <div class="sample"></div>
<!– ここまで↑ –>
  <div class="sample"></div>
  <div class="sample"></div>
  <div class="sample"></div>

例えば上のようなHTMLがあった時、「ここから↓」と「ここまで↑」と書いてあるコメントの間の要素を全て選択するにはどうすればいいですか？

Comments

[m.ts10806]

別classを当てたくない理由はありますか？

Answer 1

「何番目から何番目」のような直接的な指定の仕方にはなりません
幾つかの選択手法を組み合わせて「実際は範囲選択になっている」形になります。

f番目からt番目までの子である要素にマッチするセレクタ

可能であれば別途クラスを付与したほうが分かりやすくはなると思いますが。

Answer 2

まずcssでおなじクラスの中のn個目という処理はできません。
HTML要素単位なのでdivのn個目という認識になります。
またcssで一般兄弟結合子には後ろ方向には処理ができても
前方向には処理できません。

• 6つ目以降を赤くする

<style>
div:nth-child(5) ~ div{
color:red;
}
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

• 5つ目以前を赤くする

上記を応用して、全てを赤くして、6つ目以降を戻すという処理で
5つ目以前を修飾することはできます

<style>
div {
color:red;
}
div:nth-child(5) ~ div{
color:initial;
}
</style>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Answer 3

こんな記事をみつけました。
nth-child() でx個目以降を指定するcss

試していませんが、記事通りなら、以下でいけそうです。

div:nth-child(-n + 5) {
  /* css指定 */
}

どのブラウザが対応しているかなどはわかりません。

また、Javascriptを使用して、動的にclassを付与して、classでCSSを当てるのも１つの手かと思います。

Comments

[m.ts10806]

JavaScript使うなら、使われないこともありうるcssの指定を持っておくより直接styleあてたほうがいいかなぁと。要件次第ですね。