複数のnth-childの指定している要素の考え方がわからない

Question

皆様、いつもお世話になっております。

以下のCSSコードを教本で見たのですが、どうして５～８番目の要素を選択していることになるのかが理解できません。
どうか論理的にステップバイステップで説明していただけないでしょうか？

button:nth-child(n+5):nth-child(-n+8)

Answer 1

nth-childのnには、0以上の整数が入ります（MDN）。

なので、:nth-child(n+5)は「5番目以降」、:nth-child(-n+8)は「8番目以前」にマッチします。

---

もっとも、あまり複雑すぎる指定をCSSだけですると、HTMLと噛み合わなくなる危険があります。実用的には、その部分だけクラスを当てるほうが使いやすいです。

Comments

[kalon]

ありがとうございます。