お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

レスポンシブなnth-childの作り方

投稿日：
言語::CSS

レスポンシブにdisplayを切り替えるCSSを書いててハマったので備忘録。

今回は例として画面幅に応じて表示する項目数を変動させるCSSを書いてみます。media queryとnth-childを使って表示数を切り替えていく感じです。

イメージとしてはこんな感じ。

SP View PC View
SPビュー
PCビュー

上手くいかないケース

このコードでは画面幅を変えても項目数に変化がありません。理由としてはnth-child(n + 4)のdisplay: none;が900pxでも保持されたままだからです。試しにdisplay: none;をfont-weight: bold;とかに変えてみると良くわかります。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    .example li:nth-child(n + 6) {
        display: none;
    }
}

上手くいくケース

以下のコードではnth-childで非表示にしている部分を900pxの時に表示指定にすることで3項目表示と5項目表示が切り替わるようになっています。そりゃ指定してなければ表示されないよねっていう単純な話ですね…。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    /** 明示的に表示させる */
    .example li:nth-child(n + 4) {
        display: list-item;
    }

    .example li:nth-child(n + 6) {
        display: none;
    }
}