[]
        
(Showing Draft Content)

疑似クラス

CSS疑似クラスは、選択される要素の特別な状態を指定するためにセレクタに追加されるキーワードです。たとえば、_:hover_は、セレクタによって指定された要素の上にユーザーがマウスポインタを置いたときにスタイルを適用します。


疑似クラスを使用すると、ドキュメントツリーのコンテンツだけでなく、要素にフォーカスがあるかどうか(:focus)、要素が無効状態かどうか(:invalid)などの外部要因に応じて要素にスタイルを適用できるので、疑似クラスはフォーム内で重要です。


標準的な疑似クラスの一部は特定の要素にしか適用されず、また要素の祖先に適用されないため、実用性に制限があります。たとえば、入力要素を含むWijmo入力コントロールは多数ありますが、それらの入力要素がフォーカスを得ると、内部の入力要素は_:focus_疑似クラスを取得します。ただし、そのコントロールを保持するホスト要素は疑似クラスを取得しません。


そこで、Wijmoは、いくつかの独自疑似クラスを追加して、効果的なフォームを容易に構築できるようにしています。

  • wj-state-focused:コントロールにアクティブな要素が含まれる場合にコントロールホスト要素に追加されます(ホスト要素がアクティブな要素である場合では必ずしもありません)。これは、IE/Edgeでは使用できない標準focus-within疑似セレクタに相当します。

  • wj-state-invalid:コントロールに無効状態の入力要素が含まれる場合にコントロールホスト要素に追加されます。

  • wj-state-empty:コントロールにコンテンツがない入力要素が含まれる場合にコントロールホスト要素に追加されます。これは、子を持たない要素に適用される_:empty_疑似クラスとは異なります。

  • wj-state-readonly:コントロールのisReadOnlyプロパティがtrueに設定されている場合にコントロールホスト要素に追加されます。

  • wj-state-disabled:コントロールのisDisabledプロパティがtrueに設定されている場合にコントロールホスト要素に追加されます。これは、コントロールのホスト要素に"disabled"属性を追加することに相当します。