CSS "und" und "oder"

113

Ich habe ziemlich große Probleme, weil ich einige Eingabetypen nicht mehr formatieren muss. Ich hatte so etwas wie:

.registration_form_right input:not([type="radio")
{
 //Nah.
}

Aber ich möchte auch keine Kontrollkästchen stylen.

Ich habe es versucht:

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

Wie benutzt man &&? Und ich muss verwenden|| bald verwenden, und ich denke, dass die Verwendung gleich sein wird.

Update:
Ich weiß immer noch nicht, wie ||und &&richtig. Ich konnte in W3-Dokumenten nichts finden.

css css-selectors conditional-operator Misiur
quelle
17
"anathematisieren" Huch. Sie möchten Menschen, die versuchen, Kontrollkästchen zu gestalten, mit göttlicher Vergeltung bedrohen? (Sie meinten wahrscheinlich "ausgenommen" oder ähnliches, z. B. "Ich muss einige Eingabetypen von einer Styling-Regel ausnehmen.")
TJ Crowder
3
Nun, ich konnte keine gute Übersetzung in ein Phrasalverb aus meiner Sprache finden;)
Misiur
4
Ich denke, @TJ Crowder hat das wahrscheinlich verstanden. Aber es war lustig ... besonders die Ironie seiner Rechtschreibfehler 'göttlich' = D
David sagt, dass Monica
Tolles Gramm . ; ^)
Ruffin

Antworten:

141

&& funktioniert durch Aneinanderreihen mehrerer Selektoren wie folgt:

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

Ein anderes Beispiel:

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

|| funktioniert durch Trennen mehrerer Selektoren durch Kommas wie folgt:

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}
Geofflee
quelle
1
Ok, danke für das Licht. Ich hasse es, Formulare zu stylen, aber es ist meine Aufgabe, und die Website gehört nicht mir. Ich werde Klassen auf Eingaben anwenden.
Misiur
5
Hier ist eine nützliche Tabelle der Unterstützung von Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee
12
Wer nutzt IE jetzt :)
Tarun
2
notscheint ab IE9 zu funktionieren (dank der von @geofflee bereitgestellten Tabelle).
SharpC
1
Sind wir wirklich immer noch damit beschäftigt, ältere Versionen von IE im Jahr 2018 zu unterstützen? Nicht einmal Microsoft.
Anomalie
48

UND ( &&):

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

ODER ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
kennytm
quelle
Nein, scheitere auch. Es gilt 1 bis 2 und 2 bis 1
Misiur
@ KennyTM: Schau. Die Verwendung von Komma bewirkt Folgendes: Die Eingabe von .registration_form_right: not ([type = "radio"]) gilt für alles, einschließlich des Kontrollkästchens, und die Eingabe von .registration_form_right: not ([type = "checkbox"]) gilt für alles, einschließlich Radio
Misiur
@ Misiur: Natürlich. Der zweite ist für den ||Fall "ODER" (aka ). Zur Verdeutlichung aktualisiert.
Kennytm
1
@KennyTM: Was Misiur zu sagen versucht, ist ... Dein "||" Beispiel ist syntaktisch korrekt, aber wenn Sie den Ausdruck vereinfachen, wird er nur zu ".registration_form_right input", da die Vereinigung der beiden Selektoren alle Eingaben enthält.
Geofflee
@geo, @Mis: Schau, die Frage "Ich muss || bald verwenden" wurde gestellt, also ist dies eine Möglichkeit, ||aus den Beispielen ein zu konstruieren . Natürlich wird es .registration_form_right inputnach der Vereinfachung, aber das Wesentliche ist, dass Sie das ,as verwenden|| . Sie könnten input:not([type="radio"]), input:not([name="foo"])für ein nicht triviales Beispiel verwenden.
Kennytm
16

So wählen Sie die Eigenschaften aUND beines XElements aus:

X[a][b]

So wählen Sie Eigenschaften aODER beines XElements aus:

X[a],X[b]
waao
quelle
4

Die :notPseudoklasse wird vom IE nicht unterstützt. Ich hatte stattdessen so etwas:

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

Einige Überschneidungen, aber es ist ein kleiner Preis für eine höhere Kompatibilität.

Max Shawabkeh
quelle
2

Sie können das Verhalten von "ODER" irgendwie mit & und: nicht reproduzieren.

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}
Serge Profafilecebook
quelle
2
Entschuldigung ,: not (: not) ist keine gültige CSS-Syntax. Es funktioniert jedoch mit jQuery.
Serge Profafilecebook
1

Ich denke, Sie hassen es, mehr Selektoren zu schreiben und sie durch ein Komma zu teilen?

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

und übrigens 

not([type="radio" && type="checkbox"])

sieht für mich eher aus wie "Eingabe, die nicht beide Typen hat" :)

Jaroslav Záruba
quelle
2
Das würde nicht funktionieren, da der erste Selektor alle Nicht- radio(aber den ) auswählen würdecheckbox und der zweite das Gegenteil tun würde. Die Vereinigung der beiden würde beide checkbox und enthalten radio.
Eric
Das erste Beispiel wird sie nicht zusammen &&, es wird für Eingänge ausgelöst, die keine Radios für den ersten Selektor sind, UND für Eingänge, die keine Kontrollkästchen sind, was bedeutet, dass alle Eingänge :-)
Dan F
Du liegst falsch. Dann gilt der erste für den zweiten und der zweite für den ersten.
Misiur
1

Nur für den Fall, dass jemand wie ich feststeckt. Nachdem ich die Post und einige Treffer und Gerichtsverfahren durchgesehen hatte, funktionierte dies für mich.

input:not([type="checkbox"])input:not([type="radio"])
Aurish
quelle
1

Ein Wort der Vorsicht. Mehrere aneinander reihennot Selektoren erhöht die Spezifität des resultierenden Selektors, was das Überschreiben erschwert: Grundsätzlich müssen Sie den Selektor mit allen Nots finden und kopieren und in Ihren neuen Selektor einfügen.

Ein not(X or Y)Selektor wäre großartig, um ein Aufblähen der Spezifität zu vermeiden, aber ich denke, wir müssen uns daran halten, die Gegensätze zu kombinieren, wie in dieser Antwort .

Andrius R.
quelle