親セレクターのユースケース

CSSに「親セレクター」がCSSが実際に使用できるものとして定期的に言及されています。自分で何度も考えていたように感じますが、それから私の脳にユースケースを求めるとき、私はそれを考えるのが難しいと思います。まあ、私はただ持っていたので、ここに文書化したと思いました。

古典的な親/子供：

 <div>
  <div> </div>
</div>

この親が隠れたオーバーフローを持っていること、そして子供が絶対的なポジショニングを使用することは非常に理にかなっているとします。

 。親 {
   オーバーフロー：隠し;
   位置：相対;
}

。子供 {
   位置：絶対; 
}

ここで、子供が親の外側に位置する必要があり、まだ目に見える特別な状況が1つあるとしましょう。隠されたオーバーフローは、大部分の状況の依然として優れたデフォルトであるため、そのルールを配置することをお勧めしますが、この非常に具体的な状況では、そのオーバーフローを無効にする必要があります。

 .special-child {
   位置：絶対; 
   下：-20px; / *親の外側にある必要があります */
}

/ *本物ではありませんが、ポイントを作るためだけに */
.special-child：parent（.parent）{
   オーバーフロー：可視;
}

上記のセレクターは偽物ですが、「special-childの親を選択してください」と言っています。これにより、必要に応じてオーバーライドできます。多分それはこんな感じです：

 .Parent <.special-child><p> …右ではなく左側の要素を選択しています。知るか？おそらくそれらの両方はどういうわけか問題であり、最終的な構文は別のものになるでしょう。または多分私たちはそれを決して手に入れません。わからない。私が持っていた本当のユースケースを文書化するだけです。</p>
<p> 「親に別の特別なクラスを使用しないのはなぜですか」と考えているかもしれません。私は持っているでしょうが、親は私の選択のクラスを追加することを提供しないAPIを介してサードパーティのライブラリに注入されていました。最終的に、私は親にクラスを追加して、domを照会したカスタムJavaScriptを書いて、スペシャルチャイルドを見つけ、親を見つけてからそこにクラスを追加する必要がありました。</p>
<p>親セレクター用の他のユースケースはありますか？</p>
<p>これがUzair Hayatの1つです：</p>
<blockquote><p>私のプロジェクトには<inupt>があり、<div>に包まれています。 <div>には、<inupt>が入力されたら有効にする必要があるいくつかの設計要素があります。フォーカス。 Pseudo-Elementsの前と::後に使用することもできますが、入力は交換された要素であるため、入力はそれらをサポートしていません。今、私はjuse javaScriptを検出して、入力が焦点が合っているかどうかを検出し、親divにクラスを適用します。できたらいいのに…<pre rel="CSS" data-line="">入力：Focus：Parent（Div）：後{
    表示：ブロック;
    / *焦点を合わせたときにデザインの変更を表示 */
}