CSS3:チェック済み疑似クラスセレクター magic_html/css_WEB-ITnose

:hover、:before、:after などの CSS3 の疑似クラス セレクターはフロントエンド開発で広く使用されていますが、開発者は :checked 疑似クラス セレクターに慣れていない可能性があります。 。この記事では、チェックされた疑似クラス セレクターと、それを使用してより洗練されたコードを作成する方法を紹介します。

:checked 疑似クラスセレクターは、その名前が示すように、type="checkbox" の入力要素が選択されている状態を表します。フロントエンド開発では、マウスがホバーしているときのスタイルを設定するために :hover 疑似クラスを使用することがよくあります。チェックされた状態を変更するにはユーザーがクリックする必要があるため、:checked 疑似クラスを使用して、マウスをクリックした後の状態。 zepto および jQuery ライブラリを使用する場合、ページ上の要素を非表示にして再現するために頻繁に使用されるメソッドである toggle があります。 :checked 疑似クラスの定義を理解すると、純粋な CSS を使用してトグル効果を完全に実装できます。

最初にページ構造を定義します:

  <style>     .toggle-item{         width: 100px;         height:  100px;         background-color: pink;     }   </style>   <div class="toggle">       <input id="toggle-trigger" type="checkbox" />      <div class="toggle-item"></div>  </div>

次に、#toggle-trigger の選択状態を設定します

#toggle-trigger:not(checked) ~  .toggle-item{       display: block;     }   #toggle-trigger:checked  ~  .toggle-item{       display: none;     }

このとき、選択するかチェックを外します.toggle-item を非表示または表示するチェックボックス。

しかし、さらに一歩進んで、トグルトリガーの範囲をチェックボックスを超えて拡張したいと思います。なぜなら、トグル効果を表示するときに、トグルは限定されない チェックボックスの形式。このとき、ラベル label を使用するだけで、ラベル label に for 属性を設定することで、ラベル label を特定の入力要素に指定することができ、ラベル label をクリックすると、チェックボックスが非表示になります。トグル効果をトリガーできます。

<style> .toggle-item{     width: 100px;     height:  100px;     background-color: pink; } #toggle-trigger {    display: none; } #toggle-trigger ~ :not(checked) ~  .toggle-item{    display: block; } #toggle-trigger:checked  ~  .toggle-item{   display: none; }</style>    <div class="toggle">       <label for="toggle-trigger">触发器</label>       <input id="toggle-trigger" type="checkbox" />      <div class="toggle-item"></div>    </div>

caniuse のデータによると、:checked 疑似クラスのサポート レベルは基本的に 100% に達しています。次のプロジェクトでそれを使用してもよろしいでしょうか?

参考記事

JavaScript は必要ありません