A pseudo classe: not () pode ter vários argumentos?

746

Estou tentando selecionar inputelementos de todos os types, exceto radioe checkbox.

Muitas pessoas mostraram que você pode colocar vários argumentos :not, mas o uso typenão parece funcionar de qualquer maneira.

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Alguma ideia?

css css-selectors

— delphi
fonte

24

"Muitas pessoas mostraram que você pode colocar vários argumentos: não" Essas pessoas estavam citando um determinado artigo que é popularmente referenciado, mas seriamente enganador, ou estavam falando sobre jQuery, não CSS. Observe que o seletor fornecido é de fato válido no jQuery, mas não no CSS. Eu escrevi um Q & A detalhando as diferenças: stackoverflow.com/questions/10711730/... (a resposta também menciona que o artigo ao lado)

— BoltClock

10

Parabéns! Você escreveu com êxito CSS4.0 válido em seu exemplo acima de 2 anos antes da edição oficial.

— precisa saber é o seguinte

1

@Jack Giffin: A que "edição oficial" você está se referindo? Essa pergunta pré-data apenas o FPWD dos seletores-4 em 5 meses, e as especificações ainda não estão nem perto de serem concluídas: w3.org/TR/2011/WD-selectors4-20110929/#negation E pré-data a primeira implementação por 4 anos e meio : stackoverflow.com/questions/35993727/…

— BoltClock

1537

Por que: não basta usar dois :not:

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

_{Sim, é intencional}

— Felix Kling
fonte

4

Isso tem uma alta especificidade.

— Undistraction

63

Para quem não entende o humor: ele disse "Por que não ..." com o :personagem.

— totymedli

11

Como uma observação lateral, se você fizer algo como input:not('.c1'), input:not('c2')você acaba com uma situação "e" em que ambas as classes precisariam estar na entrada para que correspondessem.

— Cloudkiller

3

@BoltClock Atrasado, mas, portanto, o desejo pelo :not([attr],[attr])formato CSV também :-P

— TylerH

3

@Cloudkiller há que selecionar qualquer elemento de entrada -> "input sem a c1 ou entrada de classe sem o c2 classe"

— David Callanan

48

Se você estiver usando o SASS no seu projeto, eu criei esse mixin para fazê-lo funcionar da maneira que todos queremos:

@mixin not($ignorList...) {
    //if only a single value given
    @if (length($ignorList) == 1){
        //it is probably a list variable so set ignore list to the variable
        $ignorList: nth($ignorList,1);
    }
    //set up an empty $notOutput variable
    $notOutput: '';
    //for each item in the list
    @each $not in $ignorList {
        //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back
        $notOutput: $notOutput + ':not(#{$not})';
    }
    //output the full :not() rule including all ignored items
    &#{$notOutput} {
        @content;
    }
}

pode ser usado de 2 maneiras:

Opção 1: listar os itens ignorados em linha

input {
  /*non-ignored styling goes here*/
  @include not('[type="radio"]','[type="checkbox"]'){
    /*ignored styling goes here*/
  }
}

Opção 2: listar os itens ignorados em uma variável primeiro

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

CSS emitido para qualquer uma das opções

input {
    /*non-ignored styling goes here*/
}

input:not([type="radio"]):not([type="checkbox"]) {
    /*ignored styling goes here*/
}

— Daniel Tonon
fonte

6

não é como pedir a um lenhador que vá à loja de ferragens para pegar sua madeira?

— osirisgothra

O que? então você prefere escrever .selector: not (.one): not (.two): not (.three): not (.four) {...} do que .selector {@include not ('. one', ' .dois três quatro') { ... } } ?

— Daniel Tonon

2

Em termos de eficiência: sim. Muito menos 'caracteres e um código mais eficiente.

— Daan

:not()= 6 caracteres por item; '',= 3 caracteres por item. @includedeve ser atribuído a uma tecla de atalho, portanto, contarei isso como um caractere (em termos de digitação). Tecnicamente, acho que você nem precisa usar aspas simples na lista se você as detesta tanto. Eles ajudam a impedir que os editores surtem. Com base nisso, ainda acho que meu caminho é a maneira mais eficiente de digitar.

— Daniel Tonon

2

@DaanHeskes também que escrever todos os casos: not () não permite que você use uma variável para listá-los.

— plong0

30

A partir dos seletores CSS 4, é possível usar vários argumentos no :notseletor ( veja aqui ).

No CSS3, o seletor: not permite apenas 1 seletor como argumento. Nos seletores de nível 4, é possível usar uma lista de seletores como argumento.

Exemplo:

/* In this example, all p elements will be red, except for 
   the first child and the ones with the class special. */

p:not(:first-child, .special) {
  color: red;
}

Infelizmente, o suporte ao navegador é limitado . Por enquanto, ele só funciona no Safari.

— Pieter Meiresone
fonte

3

de acordo com caniuse.com , ele ainda é suportado apenas pelo Safari

— slanden

8

Lembre-se dos seletores de CSS de nível 4, e não do CSS 4, não existe o CSS 4 e provavelmente nunca existirá.

— Edu Ruiz

8

Eu estava tendo alguns problemas com isso, e o método "X: not (): not ()" não estava funcionando para mim.

Acabei recorrendo a essa estratégia:

INPUT {
    /* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
    /* styles that reset previous styles */
}

Não é tão divertido, mas funcionou para mim quando: not () estava sendo pugnaz. Não é o ideal, mas é sólido.

— eatCasserole
fonte

5

Se você instalar o plug-in Post CSS "cssnext" , poderá começar a usar com segurança a sintaxe que deseja usar agora.

O uso do cssnext transformará isso:

input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

Nisso:

input:not([type="radio"]):not([type="checkbox"]) {
  /* css here */
}

http://cssnext.io/features/#not-pseudo-class

— Daniel Tonon
fonte