CSS “e” e “ou”

113

Eu tenho um grande problema, porque preciso anatematizar a partir de estilizar alguns tipos de entrada. Eu tinha algo como:

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

Mas não quero estilizar caixas de seleção também.

Eu tentei:

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

Como usar &&? E vou precisar usar em ||breve, e acho que o uso será o mesmo.

Update:
Ainda não sei usar ||e &&corretamente. Não consegui encontrar nada nos documentos W3.

css css-selectors conditional-operator Misiur
fonte
17
"anatematizar" Caramba. Você quer ameaçar as pessoas que tentam estilizar as caixas de seleção com a retribuição divina? (Você provavelmente quis dizer "isento" ou semelhante, por exemplo, "Preciso isentar alguns tipos de entrada de uma regra de estilo".)
TJ Crowder
3
Bem, não consegui encontrar uma boa tradução para o verbo frasal do meu idioma;)
Misiur
4
Acho que @TJ Crowder provavelmente entendeu isso. Mas foi engraçado ... particularmente a ironia de seu erro de ortografia 'divino' = D
David diz reintegrar Monica
Ótimo ngram , entretanto. ; ^)
ruffin

Respostas:

141

&& funciona encadeando vários seletores como:

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

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

Outro exemplo:

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

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

|| funciona separando vários seletores com vírgulas como:

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

div.class1,
div.class2
{
  /* foo */
}
geofflee
fonte
1
Ok, obrigado pela luz. Eu odeio estilizar formas, mas é minha tarefa, e o site não é meu. Vou aplicar classes às entradas.
Misiur
5
Aqui está um gráfico útil do suporte do Internet Explorer: msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#selectors
geofflee de
12
Quem usa o Internet Explorer agora :)
Tarun
2
notparece funcionar a partir do IE9 (graças ao gráfico fornecido por @geofflee).
SharpC
1
Ainda estamos realmente preocupados em oferecer suporte a versões mais antigas do IE em 2018? Nem mesmo a Microsoft faz.
Anomaly
48

AND ( &&):

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

OU ( ||):

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])
Kennytm
fonte
Nah, falhe também.
Aplicará
@KennyTM: Olha. Usar a vírgula fará algo assim: .registration_form_right input: not ([type = "radio"]) se aplicará a tudo, incluindo checkbox, e .registration_form_right input: not ([type = "checkbox"]) se aplicará a tudo, incluindo rádio
Misiur
@Misiur: Claro. O segundo é para o caso "OU" (também conhecido como ||). Atualizado para esclarecer.
kennytm
1
@KennyTM: O que Misiur está tentando dizer é ... Seu "||" exemplo é sintaticamente correto, mas se você simplificar a expressão, torna-se apenas "entrada .registration_form_right" porque a união dos dois seletores inclui todas as entradas.
geofflee
@geo, @Mis: olha, a pergunta feita "Vou precisar usar || em breve", então essa é uma maneira de construir um a ||partir dos exemplos. Claro que se torna .registration_form_right inputapós a simplificação, mas a essência é que você use o ,como|| . Você pode usar input:not([type="radio"]), input:not([name="foo"])para um exemplo não trivial.
kennytm
16

Para selecionar propriedades aE bde um Xelemento:

X[a][b]

Para selecionar propriedades aOU bde um Xelemento:

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

A :notpseudo-classe não é compatível com o IE. Eu consegui algo assim em vez disso:

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

Alguma duplicação lá, mas é um pequeno preço a pagar por uma compatibilidade maior.

Max Shawabkeh
fonte
2

Você pode reproduzir de alguma forma o comportamento de "OU" usando & e: não.

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
Desculpe,: not (: not) não é uma sintaxe CSS válida. No entanto, funciona com jQuery.
Serge Profafilecebook
1

Eu acho que você odeia escrever mais seletores e dividi-los por uma vírgula.

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

e BTW isso 

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

parece-me mais com "entrada que não tem esses dois tipos" :)

Jaroslav Záruba
fonte
2
Isso não funcionaria, porque o primeiro selector iria selecionar todos não radio, (mas seria selecionar a checkbox), ea segunda seria fazer o inverso. A união dos dois conteria ambos checkbox e radio .
Eric
Esse primeiro exemplo não os && juntos, ele disparará para entradas que não são rádios para o primeiro seletor, E entradas que não são caixas de seleção, o que significa todas as entradas :-)
Dan F
Você está errado. Então, o primeiro será aplicado ao segundo e o segundo ao primeiro.
Misiur
1

Apenas no caso de alguém estar preso como eu. Depois de passar pelo correio e alguns acertos e testes, isso funcionou para mim.

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

Uma palavra de cautela. Agrupar vários notseletores aumenta a especificidade do seletor resultante, o que torna mais difícil substituí-lo: você basicamente precisará encontrar o seletor com todos os nots e copiá-lo e colá-lo em seu novo seletor.

Um not(X or Y)seletor seria ótimo para evitar o aumento da especificidade, mas acho que teremos que nos limitar a combinar os opostos, como nesta resposta .

Andrius R.
fonte