配置がややこしいリストは:nth-child疑似クラスを使ってレイアウト

配置がややこしいリストは:nth-child疑似クラスを使ってレイアウト

今回は、実際にお仕事で関わらせてもらったtredinaで使っているパーツをひとつ紹介します。
ユーザーとサロンがつながる tredina

PC版でアクセスしたときホーム画面で表示されるランキングのパーツ。
スマホでご覧になっている方はすみません、あとでPCで見てください…

9/1現在のtredina(PCブラウザ版)は9位までの表示となっていてスライドしないのですが、これを10位以降も右に並べて隠しておき、スライドで表示させる想定です。
ちょっと悩むポイントは、10位以降は2~9位と同じボックスを並べるので、1位の含まれる領域とは配置が変わってしまうこと。
表示領域ごとに、上段、下段を設定しないといけないということですね。

まずは、codepenでhtmlソースを見てください。

See the Pen ranking-list slider by natsumi (@mayo31) on CodePen.18228

フル表示したい場合はこちら(新規タブで開きます)
ランキングスライダー

このように、idもclassもなにもない空っぽのol>li>aです。
各ボックスの配置は、すべて:nth-childを使って設定しています。

せっかくなので少しソースを触ってみてください。
現状はスライドさせるボタンを21位までの左右1往復分しか設定してないので見れませんが、liは50個あります。

#ranking-slide > :not(a) {
  overflow: hidden;
  white-space: nowrap;
}

14~17行目が上記のようになっていますが、overflowの値をscrollに変えて確認してもらうと、10位以降が12個ごとのレイアウトになっているのがわかると思います。
CSS側を毎回調整しなくても、何個のリストでも対応できるようになっています。

:nth-child疑似クラスとは

li:first-childならば、そのli要素が兄弟要素の中で1番目の要素だったとき、li:last-childならば、最後の要素だったとき、とわかりやすいですね。
じゃあnthってなによ…(´・ω・`)

よく数学などで「自然数n」なんていって、そのとき定まっていない「数」を表すのにnを使ったりします。
また、first,second,thirdのあと、4つめ以降はfourth、fifth、と数えていきます。
つまり、10周年!なんてときに「10th」と表記するあれの、数が定まっていない版がnthだ!
と考えれば得心がいきますね。( ゚д゚)ウム

調べてないけどたぶんnumberのnだと思う。
気になる人はぐぐって私に教えてください。

で、li:nth-child(5)というセレクタなら、「そのliが兄弟要素の中で5番目の要素なとき~」という指定ができるのですが、ここでひと工夫必要になります。
たとえば5番目以降をすべて対象にしたかったら、

li:nth-child(5),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8)…ってやってられないですよね。

コンテンツによっては1000個以上あるようなリストかもしれません。検索結果などの不特定の件数を表示するときは、上限が決まってないわけだから、後ろのほうが足りなくなるかもしれませんね。

そこで使いたいのがこれ。

li:nth-child(n+5) {/* ここにスタイルを記述 */}

インデックスを式にすることで何番目以降~なんていう指定が可能になります。
nは0のときもあるので、0+5=5から始まり、1だったら1+5=6、といった感じで5番目以降が条件に当てはまり続けていくので、たった1セレクタで済んでしまうわけですね~(´∀`*)ウフフ便利
反対に、5番目までとしたかったら、

li:nth-child(-n+5) {/* ここにスタイルを記述 */}

と書けば、負の整数+5、たとえば-1+5=4、-0+5=5、となり、どうがんばっても6以上は条件に当てはまりません。-10+5だったら-5で、そんなインデックスの要素はないのでもちろん何も起きません。

私は数学がとても苦手だったんですが、今ならわかる、わかるぞ…
「倍数」を示す時、なぜ n を使うの?