Manera correcta de usar: no selector junto con el selector de "atributo contiene"

Question

Estoy creando un diseño de bootstrap y tengo la necesidad de colapsar el relleno / margen en todas las columnas col- * excepto columnas COL-XS- *.Intenté el siguiente selector en vano.

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

¡Tal vez estoy confundiendo algo o esto simplemente no es compatible?Entiendo que puedo usar lo siguiente, pero se preguntaba por qué la solución anterior no funciona.

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

Answer 1

La clase COL-XS- * se usa en el elemento COL-SM-, COL-MD, por lo que el elemento está coincidiendo con ambos.Funciona bien si solo tiene col-sm- * y no col-xs- * en el mismo elemento.

@media (min-width:768px) {

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

}

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