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

2022-09-21

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

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

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

SP View	PC View

上手くいかないケース

このコードでは画面幅を変えても項目数に変化がありません。理由としては 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;
    }
}