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

多くのアプリケーションシナリオでは、カレンダー、ショッピングカート、ギャラリー、ファイルブラウザー、オンラインライブラリ、さらにはゼブラ交差点ですべての写真を選択する必要があるセキュリティチェックなど、グリッドに選択可能なアイテムを表示する必要があります。

この記事では、Recaptchaの代わりに、グリッドにオプションのアイテムを表示するための巧妙な方法を紹介します。複数のアイテムを選択できます。 2つ以上の隣接するプロジェクトを選択すると、 :nth-of-type :checked使用して巧妙に設計できます。

丸いチェックボックスを実装するためのこのコンバイナーと擬似要素のアイデアは、私が以前に書いた記事に由来します。それはシンプルなシングルコラムのデザインです：

ただし、今回は、丸い角効果がグリッド上の垂直軸と水平軸上の要素に適用されます。ここで知っておくべきことをすべてカバーするので、チェックボックススタイルで以前の投稿を読む必要はありません。ただし、この記事で行われていることの簡略化されたバージョンに興味がある場合は、その記事は見る価値があります。

始める前に…

次のポイントに注意することは非常に便利です。たとえば、簡単にするために、デモで静的HTMLとCSSを使用しました。アプリケーションに応じて、グリッドとその内部のアイテムを動的に生成する必要がある場合があります。効果に焦点を当てるには、補助機能の実際のチェックを省略しましたが、生産環境では、この種のことを間違いなく考慮する必要があります。

また、レイアウトにはCSSグリッドを使用します。私はこれを行うことをお勧めしますが、それは単なる個人的な好みであり、あなたの経験は異なるかもしれません。私にとって、グリッドを使用すると、兄弟セレクターを使用してプロジェクトの擬似要素の::before ::afterを簡単に見つけることができます。

したがって、アプリケーションでどのレイアウト標準を使用したいとしても、擬似エレメントがまだCSSに配置されていることを確認し、レイアウトが異なるブラウザーと画面で同じままであることを確認してください。

始めましょう

以前のデモンストレーションで気づいたように、チェックボックスの要素を選択してチェックすると、周囲のチェックボックスの選択ステータスに応じて、ボックスの設計を変更します。これは、各ボックスをスタイリングするために独自ではなく、隣接する要素の擬似要素を使用するためです。

次の図は、各列のボックスの擬似要素::before （最初の列を除く）の前に、左のボックスと重複する方法と、各行の箱の擬似::after （最初の行を除く）が上のボックスと重複する方法を示しています。

これが基本コードです

タグ付けは非常に簡単です：

<main></main>

最初のCSSにはもっとあります。しかし、まず第一に、グリッド自体：

 /* grid*/
主要 {
  ディスプレイ：グリッド;
  グリッド：繰り返し（5、60px） /繰り返し（4、85px）;
  Align-Items：Center;
  Justify-Items：Center;
  マージン：0;
}

これは、5つの要素とチェックボックスを含む4つの列のグリッドです。チェックボックスのデフォルトの外観をクリアしてから、自分のライトグレーの背景とハイパーバウンドの境界線を与えることにしました。

 /*すべてのチェックボックス*/
入力{
  -webkit-acpearance：none;
  外観：なし;
  背景：#ddd;
  ボーダーラジウス：20px;
  カーソル：ポインター;
  ディスプレイ：グリッド;
  高さ：40px;
  幅：60px;
  マージン：0;
}

また、チェックボックス自体もグリッドであることに注意してください。これは::before ::after置くための鍵です。そうは言っても、今すぐやってみましょう：

 /*最初の列と最初の行を除く擬似要素*/
入力：not（：nth-​​of-type（4n 1））::前、
入力：nth-​​of-type（n 5）::後{
  コンテンツ： '';
  ボーダーラジウス：20px;
  グリッドエリア：1/1;
  ポインターイベント：なし;
}

グリッドの最初の列または行のチェックボックスにない擬似要素のみを選択します。 input:not(:nth-of-type(4n 1))最初のチェックボックスから始まり、そこから始まる4つのアイテム::beforeただし、私たちが話していることに注意してください:not() 、したがって、私たちが実際に行うことは、最初から始まる各4番目のチェックボックスの擬似要素をスキップする::beforeです。次に、5番目のチェックボックスから始めて、各チェックボックスの擬似要素::afterに適用します。

これで、グリッドの最初の列または行にない各チェックボックスの::before ::afterスタイルし、それぞれ左または上向きに移動し、デフォルトでそれらを隠すことができます。

 /*最初の列を除く擬似要素*/
入力：not（：nth-​​of-type（4n 1））:: before {
  変換：translatex（-85px）;
}

/*最初の行を除く擬似要素*/
入力：nth-​​of-type（n 5）::後{
  変換：翻訳（-60px）;
}

設定：チェック状態スタイル

チェックボックスが:checked状態。まず、ライムグリーンの背景のような色を与えましょう。

入力：チェック{背景：limegreen;

選択したボックスは、隣接するすべての選択したボックスをすべて停止できる必要があります。言い換えれば、グリッドで11番目のチェックボックスを選択すると、上の上、左、右のボックスをスタイルすることもできます。

これは、正しい擬似要素を配置することによって行われます。これをどのように行いますか？まあ、それはグリッド内の実際の列の数に依存します。 5×4グリッドで2つの隣接するボックスが選択されている場合、CSSは次のとおりです。

 /*選択したボックスの正しい境界（右の要素が選択されている場合）*/
入力：not（：nth-​​of-type（4n））：checked input：checked :: before {
  Border-Top-Right-Radius：0;
  境界線底右radius：0;
  背景：ライムグリーン;
}
/*選択したボックスの下限（次の要素が選択されている場合）*/
入力：nth-​​last-of-type（n 5）：checked * * *入力：checked :: after {
  境界線底右radius：0;
  国境圏の左radius：0;
  背景：ライムグリーン;
}
/*選択したボックスの左の境界隣接（右）選択したボックス*/
入力：not（：nth-​​of-type（4n））：checked input：checked input :: before {
  Border-Top-Left-Radius：0;
  国境圏の左radius：0;
  背景：ライムグリーン;
}
/*選択したボックスの上限（下）選択ボックス*/
入力：not（：nth-​​of-type（4n））：checked * * *入力：入力:: {before {
  Border-Top-Left-Radius：0;
  Border-Top-Right-Radius：0;
  背景：ライムグリーン;
}

必要に応じて、上記のコードを動的に生成できます。ただし、典型的なグリッド（画像ライブラリなど）の場合、列の数は小さく、固定数のアイテムである可能性がありますが、行は増加し続ける可能性があります。特にモバイル画面用に設計されている場合。そのため、このアプローチは依然として効果的なアプローチです。何らかの理由でアプリケーションが有限行と拡張列がある場合は、一連のプロジェクトでグリッドを側面に回転させることを検討してください。

また、グリッドの最後のチェックボックスにスタイルを追加する必要があります。これらは、各軸の最後のアイテムであるため、すべての擬似要素によってオーバーレイされるわけではありません。

 /*選択したボックスの左の境界（最終列）*/
入力：nth-​​of-type（4n-1）：checked input：checked {
  Border-Top-Left-Radius：0;
  国境圏の左radius：0;
}
/*選択したボックスの上限（最後の列）隣接（下）チェックボックス*/
入力：nth-​​of-type（4n）：checked * * *入力：checked {
  Border-Top-Left-Radius：0;
  Border-Top-Right-Radius：0;
}

これらのセレクターは難しいです！最初のもの...

入力：nth-​​of-type（4n-1）：チェックされた入力：チェック済み

...それは基本的にこれを言っています：

最後から2番目の列では、選択した要素が選択された要素の横にあります。

nth-of-typeの計算方法は次のとおりです。

 <code>4(0) - 1 = 无匹配项4(1) - 1 = 第3 个项目4(2) - 1 = 第7 个项目4(3) - 1 = 第11 个项目等等。</code>

そのため、3番目のチェックボックスから始めて、そこから各4番目のチェックボックスを選択します。シーケンス内のチェックボックスが選択されている場合、それらも選択されている場合は、隣接するチェックボックスもスタイルします。

そしてこの線：

入力：nth-​​of-type（4n）：checked * * *入力：checked

と言われています：

要素が選択されている場合は、1つの要素に直接隣接して、要素は別の要素に直接隣接し、要素は別の要素に直接隣接し、要素は選択された状態の要素に直接隣接しています。

これは、選択された各4番目のチェックボックスを選択していることを意味します。シーケンスのチェックボックスが選択されている場合は、選択している場合は、チェックボックスから開始する次の4番目のチェックボックスをスタイルします。

使用してください

私たちが今見たのは、デザインの背後にある一般的な原則と論理でした。繰り返しますが、アプリケーションにおけるその実用性は、メッシュデザインに依存します。

私は丸い境界線を使用しましたが、他の形状を試したり、背景効果を試すこともできます（Temaniはあなたにアイデアを与えます）。フォーミュラがどのように機能するかがわかったので、残りはあなたの想像力に完全に依存します。

簡単なカレンダーのように見えるかもしれないものは次のとおりです。

繰り返しますが、これは静的タグを使用した大まかなプロトタイプです。さらに、カレンダー関数で考慮する必要がある多くの補助関数があります。

それでおしまい！とても賢いですよね？つまり、何が起こったのかについて完全に「新しい」ものはありません。しかし、それはCSSで物を選ぶ良い例です。コンビナーと擬似エレメントを使用してより高度な選択技術をマスターすると、スタイリング機能は、別の要素の状態に基づいて条件付きスタイルアイテムをスタイルできるように、1つのアイテムのみを設定するスタイルを超えて進むことができます。

以上がグリッドコンテナ内の選択された要素を条件付きでスタイリングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。