🤞🏻 😋 🎸 汎用関連要素セレクター 👵🏾 👩🏼‍⚕️ 🗾

次のいくつかの段落では、一般化された関連要素（または〜）のセレクターとその可能なアプリケーションの範囲をさらに詳しく調べたいと思います。

彼についての情報のつづりは、私にこの記事を書くように促しました。

これは何ですか

一般化された関連要素のセレクタの主なタスクは、指定された要素の後にあり、共通の親を持つ要素を選択することです。

次のように指定されています。

A〜B {style} 、ここでAとBはセレクターを定義する文字列値です。 スタイル -適用されたプロパティ。

例

HTML：

<article> <h1></h1> <h2> 1</h2> <p>   </p> <h2> 2</h2> <span> ,   span</span> </article>

CSS：

 h1~h2 { color:red; }

その結果、h2見出しが赤に変わります。それらには、見出しh1を持つ共通の親があり、コード内ではその後ろにあります。

デモ

要素が元の要素よりも高い場合、選択されません。

ソースの親と共通の親を持つ要素のみが選択され、共通の祖先を持つ要素ではないことに注意してください。これは、2番目の例でよく示されています。

例

HTML：

 <article> <h1></h1> <h2> 1</h2> <p>   </p> <h2> 2</h2> <p>     <span> ,   span,    </span> </p> </article>

CSS：

 h1~span { color:red; }

デモ

その結果、赤でハイライトされているものはありません。スパンの親はpで、h1はarticleです。

スパンを赤にするには、h1で段落から1レベル削除するか、これを行う必要があります。

CSS：

 h1~p span { color:red; }

デモ

使用方法：ホバー

私の意見では、セレクター「A〜B」は、ホバー、フォーカスなどの要素のイベントに関連して、そのすべての有用性を示しています。

以前に要素の上にマウスを置いたときにのみ要素のスタイルを変更できる場合、一般化された関連要素のセレクターを使用すると、イベントが発生した要素とは異なる要素のスタイルを変更できます。

象徴的に（ホバーの場合）、これは次のようになります。

A：hover〜B {style} 、ここでAはマウスが上にある要素で、新しいスタイルルールがBに適用されます

例

HTML：

 <body> <span>        </span> <div> №1</div> <div> №2</div> </body>

CSS：

 div{ width:100px; height:50px; margin:5px; background:gray; } span:hover~div{ background:green; }

デモ

その結果、碑文にカーソルを合わせるとブロックが緑色に変わります。

次に、要素に異なるクラスを割り当ててみましょう。

例

HTML：

 <body> <span class="span1">  №2   </span> <br/> <span class="span2">  №1   </span> <div class="block1"> №1</div> <div class="block2"> №2</div> </body>

 CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .span1:hover~.block2{ background:green; } .span2:hover~.block1{ background:blue; }

デモ

次のように適用できます。

HTML：

 <body> <span class="spanRed">    </span> <br/> <span class="spanBlue">    </span> <br/> <span class="spanGreen">    </span> <div class="block"></div> </body>

 CSS: span{ cursor:pointer; } div{ width:100px; height:50px; margin:5px; background:gray; } .spanRed:hover~.block{ background:red; } .spanBlue:hover~.block{ background:blue; } .spanGreen:hover~.block{ background:green; }

デモ

アニメート

CSS3の新機能と組み合わせて、非常に興味深い効果を実現できます。たとえば、次の例ではtransitionプロパティを使用しています。

例

HTML：

 <body> <span class="right"></span> <span class="left"></span> <span class="top"></span> <span class="down"></span> <br/> <div class="block"></div> </body>

 CSS: span{ position:absolute; display:block; width:100px; height:50px; margin:10px; background:silver; cursor:pointer; } .left{ top:12%; } .right{ top:12%; left:40%; } .top{ left:20%; } .down{ top:25%; left:20%; } .block{ position:absolute; top:50%; right:50%; width:100px; height:50px; margin:5px; background:gray; -webkit-transition:all 2s ease; -o-transition:all 2s ease; -moz-transition:all 2s ease; } .right:hover~.block{ right:10%; } .left:hover~.block{ right:90%; } .top:hover~.block{ top:10%; } .down:hover~.block{ top:90%; }

デモ

ご覧のとおり、一般化された関連要素のセレクターには、十分な数の興味深いアプリケーションがあります。最近、CSSは大きな進歩を遂げ、以前はJavaScriptを使用してのみ可能であったことを実装できるようになりました。

しかし、私の意見では、たとえ類似性を引き出すと、CSSはロジックを構築するように設計されていない機械的なコンポーネント（ハードウェアである場合）です。たとえば、JavaScriptは「ソフトウェア」として機能できます。

そこで、この記事では、一般化された関連要素のセレクターのトピックを開こうとしました。それが判明したかどうか、あなたが判断します。

さて、最後に（太陽の上にホバー）

汎用関連要素セレクター

これは何ですか

使用方法：ホバー

アニメート

More articles: