グリッドコンテナ内の選択した要素を条件付きでスタイリングする

カレンダー、ショッピングカート、ギャラリー、ファイルエクスプローラー、およびオンラインライブラリは、選択可能なアイテムがグリッド（つまり正方格子）で表示される状況です。 ご存知のとおり、横断歩道などを含むすべての画像を選択するように求めるセキュリティチェックですら。

選択可能なオプションをグリッドに表示するための適切な方法を見つけました。 いいえ、そのreCAPTCHAを再作成するのではなく、単に複数のアイテムを選択できるようにします。 また、隣接するアイテムをXNUMXつ以上選択すると、賢く使えます :nth-of-type コンビネータ、疑似要素、および :checked 疑似クラスを使用して、グループ化されたように見えるようにスタイルを設定します。

丸みを帯びたチェックボックスを取得するためのコンビネータと疑似の全体的なアイデアは、 私が書いた前の記事。 これは、単純な単一列の設計でした。

ただし、今回は、グリッドの垂直軸と水平軸の両方に沿った要素に丸め効果が適用されます。 ここで知っておく必要のあるすべてをカバーするので、チェックボックスのスタイリングに関する前回の記事を読む必要はありません。 しかし、この記事で行っていることをスリム化することに興味がある場合は、それをチェックする価値があります。

始める前に…

いくつかのことに注意しておくと便利です。 たとえば、簡単にするために、デモでは静的HTMLとCSSを使用しています。 アプリケーションによっては、グリッドとその中のアイテムを動的に生成する必要がある場合があります。 効果に焦点を当てるために、アクセシビリティの実際的なチェックは省略していますが、実稼働環境ではそのようなことを検討することをお勧めします。

また、レイアウトにはCSSグリッドを使用しています。 同じことをお勧めしますが、もちろん、それは個人的な好みであり、マイレージは異なる場合があります。 私の場合、グリッドを使用すると、兄弟セレクターを使用してアイテムのターゲットを簡単に設定できます。 ::before & ::after 疑似。

したがって、アプリケーションで使用する可能性のあるレイアウト標準が何であれ、疑似がCSSで引き続きターゲットにできることを確認し、さまざまなブラウザーや画面間でレイアウトがそのまま維持されるようにしてください。

今すぐ始めましょう

以前のデモでお気づきかもしれませんが、チェックボックス要素をオンまたはオフにすると、周囲の他のチェックボックスの選択状態に応じて、ボックスのデザインが変更されます。 これが可能なのは、各ボックスを、それ自体の要素ではなく、隣接する要素の疑似要素を使用してスタイル設定したためです。

次の図は、 ::before それぞれのボックスの疑似要素 の項目に表示されます。 （最初の列を除く）左側のボックスとどのように重なるか ::after それぞれのボックスの疑似要素 行 （最初の行を除く）上のボックスを重ねます。

これが基本コードです

マークアップは非常に簡単です。

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

最初のCSSではもう少し進んでいます。 しかし、最初に、グリッド自体：

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

これは、チェックボックスを含むXNUMX行XNUMX列のグリッドです。 チェックボックスのデフォルトの外観を消去してから、独自の明るい灰色の背景と非常に丸みを帯びた境界線を付けることにしました。

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

チェックボックス自体がグリッドであることに注意してください。 それは彼らを配置するための鍵です ::before & ::after 疑似要素。 そういえば、今それをやってみましょう：

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

グリッドの最初の列または最初の行にないチェックボックスの疑似要素のみを選択しています。 input:not(:nth-of-type(4n+1)) 最初のチェックボックスから開始し、次に ::before そこからXNUMXつおきのアイテムの。 しかし、私たちが言っていることに注意してください :not()、だから本当に私たちがしているのは スキップ 　 ::before 最初から始まる、XNUMXつおきのチェックボックスの疑似要素。 次に、スタイルをに適用します ::after XNUMX番目のチェックボックスのすべてのチェックボックスの疑似。

これで、両方のスタイルを設定できます ::before & ::after グリッドの最初の列または行にない各チェックボックスの疑似。これにより、チェックボックスはそれぞれ左または上に移動し、デフォルトで非表示になります。

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

スタイリング :checked 状態

チェックボックスが入っているときにチェックボックスのスタイルを設定するようになりました :checked 州。 まず、彼らに色を付けましょう、例えば limegreen バックグラウンド：

input:checked { background: limegreen; }

チェックボックスは、隣接するすべてのチェックボックスのスタイルを変更できる必要があります。 つまり、グリッドのXNUMX番目のチェックボックスを選択すると、その周りのボックスのスタイルを上下左右に変更できるようになります。

これは、正しい疑似要素をターゲットにすることによって行われます。 どうすればいいですか？ まあ、それはグリッド内の実際の列数に依存します。 5⨉4グリッドでXNUMXつの隣接するボックスがチェックされている場合のCSSは次のとおりです。

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

必要に応じて、上記のコードを動的に生成できます。 ただし、画像ギャラリーなどの一般的なグリッドでは、列の数は少なく、アイテムの数は固定されている可能性がありますが、行は増え続ける可能性があります。 特にモバイル画面用に設計されている場合。 そのため、このアプローチは依然として効率的な方法です。 何らかの理由でアプリケーションの行が制限され、列が拡張されている場合は、グリッドを横に回転することを検討してください。アイテムのストリームでは、CSSグリッドがそれらを左から右および上から下に（つまり行ごとに）配置するためです。 。

また、グリッドの最後のチェックボックスにスタイルを追加する必要があります。これらは各軸の最後の項目であるため、すべてが疑似要素で覆われているわけではありません。

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

それらはいくつかのトリッキーなセレクターです！ 最初のXNUMXつ…

input:nth-of-type(4n-1):checked + input:checked

…基本的にこれを言っています：

チェック済み <input> チェック済みの横の要素 <input> 最後からXNUMX番目の列。

と nth-of-type 次のように計算されます：

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

したがって、XNUMX番目のチェックボックスから始めて、そこからXNUMXつおきのチェックボックスを選択します。 また、その順序でチェックボックスがオンになっている場合は、隣接するチェックボックスもオンになっている場合はスタイルを設定します。

そしてこの行：

input:nth-of-type(4n):checked + * + * + * + input:checked

これを言っている：

An <input> チェックされた要素は、要素に直接隣接し、別の要素に直接隣接し、別の要素にも直接隣接し、次に、別の要素に直接隣接します。 <input> チェック状態にある要素。

つまり、チェックされているチェックボックスはXNUMXつおきに選択されています。 また、そのシーケンスのチェックボックスがオンになっている場合、そのチェックボックスから次のXNUMX番目のチェックボックスもオンになっている場合はスタイルを設定します。

活用する

今見たのは、設計の背後にある一般的な原理とロジックです。 繰り返しますが、アプリケーションでどれだけ役立つかは、グリッドの設計によって異なります。

丸みを帯びた境界線を使用しましたが、他の形状を試したり、背景効果を試したりすることもできます（テマニはあなたにアイデアを提供してくれました）。 数式がどのように機能するかがわかったので、残りは完全にあなたの想像力次第です。

シンプルなカレンダーでどのように表示されるかを次に示します。

繰り返しますが、これは静的マークアップを使用した大まかなプロトタイプにすぎません。 また、カレンダー機能では、アクセシビリティに関する考慮事項がたくさんあります。

---

おしまいです！ かなりきちんとしていますよね？ つまり、何が起こっているのかについて正確に「新しい」ものは何もありません。 しかし、それはの良い例です 物を選ぶ CSSで。 コンビネータと疑似を使用するより高度な選択手法を理解している場合、スタイリング能力はXNUMXつのアイテムのスタイリングをはるかに超えて到達できます。これまで見てきたように、別の要素の状態に基づいてアイテムを条件付きでスタイリングできます。

---

グリッドコンテナ内の選択した要素を条件付きでスタイリングする 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/