この特定の CSS セレクターは、追加しても機能しないので、非常に困っています:not(:empty)。他のセレクターと組み合わせると、問題なく機能するようです。
input:not(:empty):not(:focus):invalid { border-color: #A22; box-shadow: none }
部分を削除すると:not(:empty)、正常に動作します。セレクタを変更しても、テキストが入力されている入力フィールドは選択されません。これは壊れているのでしょうか、それともセレクタ内でinput:not(:empty)使用できないだけなのでしょうか?:empty:not()
私が考えられる唯一の他のことは、ブラウザが、子要素がなく、いわゆる「値」だけがあるため、要素が空であるとまだ言っているということです。セレクターには、:empty入力要素と通常の要素に対して別々の機能がありませんか? ただし、フィールドで を使用し、そこに何かを入力すると、代替効果がなくなるため (空ではなくなるため)、これはありそうにありません:empty。
Firefox 8 および Chrome でテスト済み。
ベストアンサー1
であること空要素要素<input>は空のHTMLの「空」の定義では、すべてのvoid要素のコンテンツモデルは常に空ですしたがって、値があるかどうかに関係なく、疑似クラスに常に一致します:empty。また、開始タグと終了タグ内のテキスト コンテンツではなく、開始タグ内の属性によって値が表されるのもこのためです。
また、セレクタ仕様:
疑似
:emptyクラスは、子要素をまったく持たない要素を表します。ドキュメント ツリーに関しては、データの長さが 0 以外の要素ノードとコンテンツ ノード (DOM テキスト ノード、CDATA ノード、エンティティ参照など) のみが空性に影響を与えると見なす必要があります。
したがって、input:not(:empty)適切な HTML ドキュメント内のどの要素とも一致することはありません。(テキストまたは子要素を受け入れることができる要素を定義する仮想 XML ドキュメントでは、引き続き機能します<input>。)
CSSだけを使って空のフィールドを動的にスタイル設定することはできないと思います<input>（つまり、フィールドが空の場合は常に適用され、テキストが入力されると適用されないルール）。当初空の属性がある場合value( input[value=""])、または属性がまったくない場合 ( input:not([value])) はフィールドが空になりますが、それだけです。