CSS "and" e "or"

113

Ho dei grossi problemi, perché ho bisogno di anatemizzare dallo stile di alcuni tipi di input. Ho avuto qualcosa come:

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

Ma non voglio dare uno stile anche alle caselle di controllo.

Ho provato:

.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"])

Come si usa &&? E avrò bisogno di usarlo ||presto e penso che l'utilizzo sarà lo stesso.

Aggiornamento:
non so ancora come usare ||e &&correttamente. Non sono riuscito a trovare nulla nei documenti W3.

css css-selectors conditional-operator

— Misiur
fonte

17

"anathematise" Yikes. Vuoi minacciare le persone che tentano di modellare le caselle di controllo con una punizione divina? (Probabilmente intendevi "esente" o simile, ad es. "Ho bisogno di esentare alcuni tipi di input da una regola di stile.")

— TJ Crowder

3

Beh, non sono riuscito a trovare una buona traduzione del verbo

— frasale

4

Penso che @TJ Crowder probabilmente lo abbia capito. Ma è stato divertente ... in particolare l'ironia del suo errore di ortografia "divino" = D

— David dice di reintegrare Monica

Ottimo ngram , però. ; ^)

— ruffin

141

&& funziona mettendo insieme più selettori in questo modo:

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

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

Un altro esempio:

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

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

|| funziona separando più selettori con virgole in questo modo:

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

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

— geofflee
fonte

1

Ok, grazie per la luce. Odio le forme di stile, ma è compito mio e il sito non è mio. Applicherò classi agli input.

— Misiur

5

Ecco una tabella utile di ciò che supporta Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors

— geofflee

12

Chi usa IE adesso :)

— Tarun

2

notsembra funzionare da IE9 in poi (grazie al grafico fornito da @geofflee).

— SharpC

1

Siamo davvero ancora interessati a supportare le versioni precedenti di IE nel 2018? Nemmeno Microsoft lo fa.

— Anomalia

48

AND ( &&):

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

O ( ||):

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

— kennytm
fonte

Nah, fallisci anche tu. Si applicherà 1 a 2 e 2 a 1

— Misiur

@ KennyTM: Guarda. L'utilizzo della virgola farà qualcosa del genere: .registration_form_right input: not ([type = "radio"]) si applicherà a tutto, inclusa la casella di controllo, e .registration_form_right input: not ([type = "checkbox"]) si applicherà a tutto, incluso radio

— Misiur

@Misiur: Certamente. Il secondo è per il caso "OR" (aka ||). Aggiornato per chiarire.

— kennytm

1

@KennyTM: Quello che Misiur sta cercando di dire è ... Il tuo "||" l'esempio è sintatticamente corretto, ma se si semplifica l'espressione, diventa solo ".registration_form_right input" perché l'unione dei due selettori include tutti gli input.

— geofflee

@geo, @Mis: guarda, la domanda ha chiesto "dovrò usare || presto", quindi questo è un modo per costruire un a ||partire dagli esempi. Ovviamente diventa .registration_form_right inputdopo la semplificazione, ma l'essenza è che usi l' ,as|| . Potresti usare input:not([type="radio"]), input:not([name="foo"])per un esempio non banale.

— kennytm

16

Per selezionare le proprietà aAND bdi un Xelemento:

X[a][b]

Per selezionare le proprietà aOR bdi un Xelemento:

X[a],X[b]

— waao
fonte

4

La :notpseudo-classe non è supportata da IE. Invece avevo qualcosa del genere:

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

Alcuni duplicati lì, ma è un piccolo prezzo da pagare per una maggiore compatibilità.

— Max Shawabkeh
fonte

2

Puoi in qualche modo riprodurre il comportamento di "OR" usando & e: not.

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
fonte

2

Spiacenti,: not (: not) non è una sintassi CSS valida. Tuttavia, funziona con jQuery.

— Serge Profafilecebook

1

Immagino che odi scrivere più selettori e dividerli con una virgola?

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

e BTW questo

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

mi sembra più simile a "input che non ha entrambi questi tipi" :)

— Jaroslav Záruba
fonte

2

Che non avrebbe funzionato, perché il primo selettore si seleziona tutto non radio, (ma sarebbe selezionare la checkbox), e il secondo avrebbe fatto il contrario. L'unione dei due conterrebbe sia checkbox e radio .

— Eric

Quel primo esempio non li && insieme, si attiverà per ingressi che non sono radio per il primo selettore E ingressi che non sono caselle di controllo, il che significa che tutti gli ingressi :-)

— Dan F

Hai torto. Quindi, il primo si applicherà al secondo e il secondo al primo.

— Misiur

1

Nel caso in cui qualcuno fosse bloccato come me. Dopo aver esaminato il palo e alcuni colpi e prove, questo ha funzionato per me.

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

— Aurish
fonte

1

Una parola di cautela. Mettere insieme diversi notselettori aumenta la specificità del selettore risultante, il che rende più difficile l'override: fondamentalmente dovrai trovare il selettore con tutti i non e copiarlo e incollarlo nel tuo nuovo selettore.

Un not(X or Y)selettore sarebbe ottimo per evitare di gonfiare la specificità, ma immagino che dovremo attenerci alla combinazione degli opposti, come in questa risposta .

— Andrius R.
fonte