CSSで隣接ノードの「先頭３つ」を取る。（自分の直後の３つ）

CSSの隣接ノードで、指定したIDの直後の３つまでを指定したい。

#id ~ div:nth-of-type(-n+3) {
 background-color:black; 
}

<div id="id"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

結果

ここから、隣接ノードで自分の直後の３つ（隣接ノードの中の先頭３つ）を選ぼうとしたら

#id ~ div:nth-of-type(-n+4) 

コレで、取れることがわかります。

メモ (2024-05-13)

ただし、has と組み合わせするとうまく動作しなかった。