その買うを、もっとハッピーに。|ハピタス

nth-of-type(nth-child)で◯番目から◯番目を指定する方法

少し前にnth-of-type(nth-child)で◯番目から◯番目を指定出来ないのかと調べたのですが、自分の検索の仕方が悪いのか見つからずそういったことは出来ない仕様なのかと諦めてました。
因みにnth-of-typeとnth-childは若干違いますが、自分はnth-of-typeを中心に使ってるので、以後こちらで表記します。
簡潔に言うとnth-of-typeの方が縛りが強く、数える際にタグの種類まで条件が絞られます。一方nth-childはタグの種類に関わらず全ての要素が対象になります。
ですので、思わぬ動作を起こさないためにも普段はnth-of-typeを中心に使って、条件を緩くしたい時だけnth-childを使うのが望ましいと思ったので、個人的にはそのように使い分けてます。


本題ですが、サイトを編集していて、notを組み合わせれば事実上nth-of-typeで◯番目から◯番目を指定出来るんじゃない?とふと閃きました。
CSS3にはnotという否定疑似クラスがあるのを少し前に知ったのですが、これが何かと便利で、今回の◯番目から◯番目の指定もこれで実現出来ます。
どのように表記するかというと、以下のようになります。

li:nth-of-type(-n+7):not(li:nth-of-type(-n+3))


何を意味してるのか説明しますと、まずnotより前のセレクタでliタグの一つ目から7つを指定します。
そして、notより後で一つ目から3つを否定します。
つまり7つを指定してから始めから3つを否定することにより、事実上4つ目から7つ目を指定していることになります。


サイトを編集していて、このようなこうすればいけるじゃんと閃いたことがちょくちょくあったので、また紹介したいと思います。