CSSチップ

CSShas() 関数は、条件が満たされるかどうかによってスタイルを要素に適用するために使用できます.この小さな記事では、特定のケースでどのように使用できるかを見ていきます.
我々がスタイルを定義していると仮定してくださいlabel 我々のフォームのタグと我々が望むものは、すべてのそれらのためだけに特定のスタイルを定義することですlabel これは型の要素に関連付けられますcheckbox . すなわち、我々はスタイルをinput 以下のようなマークアップの要素

<label for='my-checkbox'>
  <input id='my-checkbox' type='checkbox' value='my-value' />
</label>

我々が定義しなければならない最初のことは、我々のCSS規則がlabel フォームのタグが、我々を使用するつもりですhas() このタイプに適用したいCSS規則を適用するために、与えられなければならない一種の問い合わせまたは条件を起動できる機能label . つまり、次のようなものから始めます.

label:has() {
  /* CSS rules to be applied. */
}

私たちは欲しいものがhas() 関数をlabel タグとパラメータとして受け取る条件が満たされた場合にのみ定義されます.
しかし、どのように我々は条件が満たさなければならないことを確立するのですか?さて、これは我々が我々が知っているCSSセレクタを利用しなければならないところです.私たちは、ルールがタイプの要素だけに適用されることを望むcheckbox そして、これはCSSでどのように表現されますか?さて、次のように.

input[type="checkbox"]

さて、どのようにしてスタイルが直接の子孫に適用されるべきかを決定すべきでしょうかlabel チェックボックス型のタグですか?まあ、我々は使用します> 演算子(以下、CSSという)

label > input[type="checkbox"] {
  /* CSS rules to be applied. */
}

これで、私たちは私たちが追求しているゴールを達成するのに非常に近いです.私たちが知っているように、私たちが知っているように、私たちがブレースの間に置かれたCSS規則のセットがCheckBox要素に適用されるということを知っていますが、我々が解決しようとしている問題が我々がこれらの規則を適用することを望むということを覚えていなければなりませんlabel 要素.では、このセレクタをパラメータとして使用する場合はhas() 機能?つまり、次のように書きます.

label:has(> input[type="checkbox"]) {
  /* CSS rules to be applied. */
}

さて、答えは、これが正しい解決策であるということですlabel タグと呼び出しhas() それらの機能は、チェックボックスである直接の子孫を持っているかのように何かを求めるか?答えがイエスであるならば、それは私がブレースであなたを与えるつもりである規則を適用します;それ以外の場合は無視します.

We should use the CSS has() function when we want a set of styles to be applied to a given element when it is satisfied that it contains elements of certain types.

NOTA : Prip Obtener M ' s s Informaci n n acerca de c ' Mo funciona la function i nhas() se recomienda leeresta entrada デラMDN.