CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。
Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。

使い方

まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。
あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空になる場合もありますが、基本的にここへ指定する数を記述するようになります。

使用例

使用方法は実際の表示と合わせて配布サイトでも確認できますが、せっかくなのでここでも幾つか使用例を紹介します。
以下では省略していますが、いずれもulliを利用したHTMLを使用している想定で、SCSSではその中から特定のli要素に対してbackground: red;を指定するという形で紹介していきます。

First

Firstは「先頭からn番目まで」という指定方法で、使用時は@include first(n)と指定します。
例として、下記のように記述すれば先頭から3番目までのli要素にスタイルを適用できます。

ul li {
  @include first(3) {
    background: red;
  }
}

ちなみに、逆に最後から指定したいときはLastが利用できます。

From-End

From-Endは「最後からn番目」という指定方法で、使用時は@include from-end(n)と指定します。
例として、下記のように記述すれば最後から3番目のli要素にスタイルを適用できます。

ul li {
  @include from-end(3) {
    background: red;
  }
}

Between

Betweenは「x番目からy番目まで」のような指定方法で、使用時は@include between(x, y)と指定します。
例として、li要素が10個並べられており、その中の3番目から6番目までにスタイルを適用したいという場合は下記のように記述します。

ul li {
  @include between(3, 6) {
    background: red;
  }
}

All-But

All-Butはいわゆる:not()を利用した指定方法で、@include all-but(n)のように記述すると「n番目以外」という指定になります。
例として、下記のように記述すれば3番目のli要素以外にスタイルを適用できます。

ul li {
  @include all-but(3) {
    background: red;
  }
}

From-First-Last

From-First-Lastは「先頭からn番目+最後からn番目」というように、それぞれのn番目を指定することができます。
例として、li要素が10個並べてある場合に下記のように記述すれば2番目と9番目にスタイルが適用されます。

ul li {
  @include from-first-last(2) {
    background: red;
  }
}

ちなみに、単純に先頭と最後を指定するFirst-Lastというものも用意されています。

First-Of

ちょっとわかりずらいかもしれませんが、First-Ofは特定の要素が特定の数あるとき、その先頭の要素を指定するということができます。
例として、下記はli要素が10個あると時に先頭のli要素のみにスタイルが適用されるものになりますが、もしli要素が10以外の数になった場合はスタイルは適用されなくなります。

ul li {
  @include first-of(10) {
    background: red;
  }
}

ちなみに、逆に最後の要素を指定したいときはLast-Ofが利用できます。


上で紹介した使用例はほんの一部で他にも便利な指定方法が全20種類用意されているので、:nth-child:nth-last-child疑似クラスは多用するけど指定が苦手な人やもっと楽したいと思う人はぜひ使ってみてください。
また、配布サイトでは実際の動きを確認できるサンプルが要素数を増減させて確認することができる形で用意されていたり、ページ下部ではそれぞれがコンパイル後にどのような記述になるのかもまとめられています。

ファイルのダウンロードや詳細、その他のサンプルについては以下で確認できます。