フォーカスの外に要素をスタイリングするための CSS :blur 疑似クラスはありますか?

CSS に :blur セレクターが存在しないことを調べる

CSS では要素のスタイルを設定するために :focus 疑似クラスがよく使用されます。焦点を合わせると、対応する :blur が存在するかどうかという疑問が生じます。 pseudo-class.

質問への答え

一般に信じられていることに反して、CSS には :blur 疑似クラスが含まれていません。これは、CSS 疑似クラスが状態を表すのではなく、イベントや状態間の遷移を表すためです。この場合、:focus はフォーカスのある要素を表しますが、フォーカスを失った要素の疑似クラスはありません。

:focus と :hover の制限について

同様に、:mouseover または :mouseout 疑似クラスはありません。これらの疑似クラスは、ポインティング デバイスが上にホバリングしているかどうかに関係なく要素を表しますが、CSS はホバリング状態に入る、またはホバリング状態から出るイベントをキャプチャできません。

代替アプローチ

フォーカスを持たずに要素にスタイルを適用したい場合は、次のいずれかを使用します。メソッド:

1. :not() による否定:

input:not(:focus), button:not(:focus) {
    /* Styles for unfocused inputs and buttons */
}

2. :focus によるオーバーライド:

input, button {
    /* Styles for all inputs and buttons */
}

input:focus, button:focus {
    /* Styles for focused inputs and buttons */
}

これを理解することで制限があるため、開発者は効果的にスタイルを管理し、とらえどころのない疑似クラスへの不要な依存関係を回避できます。

以上がフォーカスの外に要素をスタイリングするための CSS :blur 疑似クラスはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。