¿Qué es este selector de CSS?

Vi este selector en Twitter Bootstrap:

.show-grid [class*="span"] { background-color: #eee; text-align: center; border-radius: 3px; min-height: 30px; line-height: 30px; } 

¿Alguien sabe cómo se llama esta técnica y qué hace?

Es un selector de comodines de atributo. En la muestra que ha proporcionado, busca cualquier elemento secundario bajo .show-grid que tenga una clase que CONTIENE span .

Entonces seleccionaría el elemento en este ejemplo:

 
Blah blah

También puede hacer búsquedas de ‘comienza con …’

 div[class^="something"] { } 

que funcionaría en algo como esto: –

 

y ‘termina con …’

 div[class$="something"] { } 

que funcionaría en

 

Buenas referencias

  • Selectores de atributos CSS3: concordancia de subcadenas
  • Los 30 selectores de CSS que debes memorizar
  • Selectores de W3C CSS3
 .show-grid [class*="span"] 

Es un selector de CSS que selecciona todos los elementos con la clase show-grid , que tiene un elemento secundario cuya clase contiene el span de nombre.

Selecciona todos los elementos donde el nombre de clase contiene la cadena "span" alguna parte. También hay ^= para el comienzo de una cadena, y $= para el final de una cadena. Aquí hay una buena referencia para algunos selectores de CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Solo estoy familiarizado con las clases bootstrap spanX donde X es un número entero, pero si hubiera otros selectores que terminaran en span , también caería bajo estas reglas.

Simplemente ayuda a aplicar las reglas generales de CSS.

El seguimiento:

 .show-grid [class*="span"] { 

significa que todos los elementos secundarios de ‘.show-grid’ con una clase que CONTIENE la palabra ‘span’ en él adquirirán esas propiedades de CSS.

 
.span
span6
attention
spanish
mariospan
espanol
.span

span

I do GET HIT I DO NOT GET HIT

Todos los elementos son golpeados a excepción del por sí mismo.