web-dev-qa-db-ja.com

CSS3：未チェックの擬似クラス

公式のCSS3 :checked擬似クラスがあることは知っていますが、:unchecked擬似クラスはありますが、同じブラウザーをサポートしていますか？

Sitepointのリファレンス は言及していませんが、これは whatwg spec （それが何であれ）です。

:checkedと:not()の擬似クラスを組み合わせると同じ結果が得られることはわかっていますが、私はまだ興味があります。

input[type="checkbox"]:not(:checked) {
    /* styles */
}

編集：

W3cは同じ手法を推奨しています

否定擬似クラスを使用して、チェックされていないチェックボックスを選択できます。

:not(:checked)
csscss3css-selectorspseudo-class
89
Web_Designer

:uncheckedは、セレクターまたはCSS UIレベル3仕様では定義されておらず、セレクターのレベル4にも現れていません。

実際、W3Cからの引用は Selectors 4仕様から取得 です。 Selectors 4は:not(:checked)の使用を推奨しているため、対応する:unchecked pseudoがないと仮定しても安全です。 :not()と:checkedのブラウザサポートは同一であるため、問題になりません。

これは:enabledおよび:disabled状態と矛盾しているように見える場合があります。特に、要素はneverの有効化または無効化（つまり、セマンティクスは完全に適用されません）、しかし、この矛盾の説明はないようです。

（セマンティクスが適用されないため、要素は同様にチェック解除、チェック、不確定のいずれにもできないため、:indeterminateはカウントされません。）

83
BoltClock

あなたは複雑なことをやり過ぎていると思います。簡単な解決策は、デフォルトでチェックされていないスタイルでチェックボックスをスタイルし、チェックされた状態のスタイルを追加することです。

input[type="checkbox"] {
  // Unchecked Styles
}
input[type="checkbox"]:checked {
  // Checked Styles
}

古いスレッドを作成してしまったことをおaびしますが、より良い答えを使用できたように感じました。

編集（2016年3月3日）：

W3C仕様では、未チェック状態を選択する例として:not(:checked)と記載されています。ただし、これは明示的に未チェックの状態であり、これらのスタイルは未チェックの状態にのみ適用されます。これは、未チェック状態でのみ必要で、input[type="checkbox"]セレクターで使用される場合にチェック状態から削除する必要があるスタイリングを追加するのに役立ちます。詳細については、以下の例を参照してください。

input[type="checkbox"] {
  /* Base Styles aka unchecked */
  font-weight: 300; // Will be overwritten by :checked
  font-size: 16px; // Base styling
}
input[type="checkbox"]:not(:checked) {
  /* Explicit Unchecked Styles */
  border: 1px solid #FF0000; // Only apply border to unchecked state
}
input[type="checkbox"]:checked {
  /* Checked Styles */
  font-weight: 900; // Use a bold font when checked
}

上の例で:not(:checked)を使用しないと、:checkedセレクターはborder: none;を使用して同じ効果を得る必要があります。

ベーススタイリングにinput[type="checkbox"]を使用して、重複を減らします。

チェックされた状態に適用したくない明示的なチェックされていないスタイルには、input[type="checkbox"]:not(:checked)を使用します。

30
Michael Stramel

：unchecked疑似クラスはありませんが、：checked疑似クラスと兄弟セレクターを使用すると、両方の状態を区別できます。最新のブラウザはすべて：checked疑似クラスをサポートしていると思います。このリソースから詳細情報を見つけることができます： http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Jqueryを使用してブラウザのサポートを改善する...クリック機能を使用して、クリックが発生したときと、チェックされているかどうかを検出し、必要に応じてクラスを追加または削除できます...

3
Jeff Wooden

これを処理する方法は、条件に基づいてラベルのclassNameを切り替えることでした。この方法では、ラベルは1つだけ必要であり、状態ごとに異なるクラスを持つことができます。

0
Daniel Ram