CSS3: deaktivierte Pseudoklasse

108

Ich weiß, dass es eine offizielle CSS3 :checked-Pseudoklasse gibt, aber gibt es eine :uncheckedPseudoklasse, und haben sie die gleiche Browserunterstützung?

In der Referenz von Sitepoint wird keine erwähnt, jedoch macht diese whatwg-Spezifikation (was auch immer das ist).

Ich weiß, dass das gleiche Ergebnis erzielt werden kann, wenn die Klassen :checkedund :not()Pseudoklassen kombiniert werden, aber ich bin immer noch neugierig:

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

Bearbeiten:

Das w3c empfiehlt die gleiche Technik

Ein deaktiviertes Kontrollkästchen kann mithilfe der Negationspseudoklasse aktiviert werden:
:not(:checked)

css css-selectors pseudo-class

— Webdesigner
quelle

104

:unchecked ist weder in den Spezifikationen für Selectors oder CSS UI Level 3 definiert, noch wurde es in Level 4 von Selectors angezeigt.

Tatsächlich stammt das Zitat von W3C aus der Selectors 4-Spezifikation . Da Selectors 4 die Verwendung empfiehlt, :not(:checked)kann davon ausgegangen werden, dass kein entsprechendes :uncheckedPseudo vorhanden ist. Die Browserunterstützung für :not()und :checkedist identisch, sodass dies kein Problem sein sollte.

Dies mag mit den Zuständen :enabledund inkonsistent erscheinen :disabled, insbesondere da ein Element weder aktiviert noch deaktiviert werden kann (dh die Semantik trifft überhaupt nicht zu), es scheint jedoch keine Erklärung für diese Inkonsistenz zu geben.

( :indeterminatezählt nicht, da ein Element in ähnlicher Weise weder deaktiviert, aktiviert noch unbestimmt sein kann, da die Semantik nicht gilt.)

— BoltClock
quelle

Nur um dieser Antwort hinzuzufügen, dass die Auswahl: nicht (: aktiviert) in Chrome perfekt funktioniert, aber nicht in IE (getestet auf 9 und 11).

— Bruno Finger

@Bruno Finger :: markiert und: nicht (: geprüft) sollten beide im Internet Explorer funktionieren, außer dass beide gleichermaßen von einem Fehler betroffen sind, bei dem durch Ändern des aktivierten Status die Stile der Elemente, auf die in Bezug auf die aktivierten / nicht aktivierten Elemente abgezielt wird, nicht aktualisiert werden Element.

— BoltClock

35

Ich denke, Sie versuchen, die Dinge zu komplizieren. Eine einfache Lösung besteht darin, Ihr Kontrollkästchen standardmäßig mit den nicht aktivierten Stilen zu formatieren und dann die aktivierten Statusstile hinzuzufügen.

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

Ich entschuldige mich dafür, dass ich einen alten Thread angesprochen habe, hatte aber das Gefühl, dass er eine bessere Antwort hätte gebrauchen können.

EDIT (03.03.2016):

In den W3C-Spezifikationen wird dies :not(:checked)als Beispiel für die Auswahl des nicht aktivierten Status angegeben. Dies ist jedoch explizit der deaktivierte Status und wendet diese Stile nur auf den deaktivierten Status an. Dies ist nützlich, um Stile hinzuzufügen, die nur im deaktivierten Status erforderlich sind und bei Verwendung im input[type="checkbox"]Selektor aus dem aktivierten Status entfernt werden müssten . Zur Verdeutlichung siehe Beispiel unten.

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
}

Ohne die Verwendung :not(:checked)im obigen Beispiel hätte der :checkedSelektor a verwenden müssen border: none;, um den gleichen Effekt zu erzielen.

Verwenden Sie das input[type="checkbox"]For-Base-Styling, um Doppelarbeit zu reduzieren.

Verwenden Sie die input[type="checkbox"]:not(:checked)Option für explizite ungeprüfte Stile, die Sie nicht auf den aktivierten Status anwenden möchten.

— Michael Stramel
quelle

Es gibt andere Verwendungen von CSS-Selektoren, bei denen es nützlich / ausdrucksstark ist: Javascript, automatisierte Browsertests

— Nr.

2

Das ist nicht immer möglich. Insbesondere Formularelemente sind dafür berüchtigt, dass Sie sie nicht über kaskadierende Regeln auf ihr Standard-Erscheinungsbild zurücksetzen können. (Warum jemand nur geprüften oder nur ungeprüften Eingaben ein benutzerdefiniertes Erscheinungsbild geben möchte, während er die andere Münze verlässt, ist mir ein

— Rätsel

Ein weiterer Fall, in dem dies nicht möglich ist: Mehr als 2 Optionsfelder. Beispielsweise möchten Sie möglicherweise einen Stil, wenn Option 1 aktiviert ist, und einen anderen, wenn etwas anderes aktiviert ist. Die Lösung ist:not(:checked)

— Navin

Wenn Sie wurden nur wollen bestimmte diejenigen Stil wollen, warum nicht verwenden , um einen :first-child, :last-childoder :nth-childWähler in Kombination mit :checked. :not(:checked)wird die von Ihnen angegebene Situation nicht abdecken, es sei denn, ich verstehe Ihren Kommentar falsch.

— Michael Stramel

@MichaelStramel die Reihenfolge der htmls in die CSS setzen? Nein, danke

— Inetphantom

3

Es gibt keine: ungeprüfte Pseudoklasse. Wenn Sie jedoch die: geprüfte Pseudoklasse und den Geschwister-Selektor verwenden, können Sie zwischen beiden Zuständen unterscheiden. Ich glaube, alle neuesten Browser unterstützen die: überprüfte Pseudoklasse. Weitere Informationen finden Sie in dieser Ressource: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

Mit jquery erhalten Sie eine bessere Browserunterstützung. Mithilfe einer Klickfunktion können Sie erkennen, wann der Klick erfolgt. Wenn dies aktiviert ist oder nicht, können Sie bei Bedarf eine Klasse hinzufügen oder eine Klasse entfernen.

— Jeff Wooden
quelle

-2

Ich habe damit umgegangen, indem ich den Klassennamen eines Labels basierend auf einer Bedingung geändert habe. Auf diese Weise benötigen Sie nur ein Etikett und können verschiedene Klassen für verschiedene Zustände haben ... Hoffe, das hilft!

— Daniel Ram
quelle