Maneira correta de usar o seletor :not junto com o seletor “atributo contém”

Question

Estou criando um layout de bootstrap e preciso recolher o preenchimento/margem em todas as colunas col-*, exceto colunas col-xs-*.Tentei o seletor abaixo sem sucesso.

.grid [class^="col-"]:not([class^="col-xs-"]) {
    padding: 0;
    margin: 0;
}

Talvez eu esteja confundindo alguma coisa ou isso simplesmente não é compatível?Entendo que posso usar o seguinte, mas queria saber por que a solução acima não funciona.

.grid [class^="col-sm-"], .grid [class^="col-md-"], .grid [class^="col-lg-"] {
    padding: 0;
    margin: 0; 
}

Answer 1

A classe col-xs-* é usada no elemento col-sm-, col-md-, portanto, o elemento corresponde a ambos.Funciona bem se você tiver apenas col-sm-* e não col-xs-* no mesmo elemento.

@media (min-width:768px) {

  .row.grid {margin-left:0;margin-right:0;}
  .grid [class*="col-"] {padding:0;}

}

http://jsbin.com/fabos/2/edit