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

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