¿Qué es este selector de CSS? [* Clase = "span"]

Question

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 lo que esta técnica se llama y lo que hace?

Answer 1

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.

Así se seleccionaría el elemento <strong> en este ejemplo:

<div class="show-grid"> 
    <strong class="span6">Blah blah</strong> 
</div> 

También puede hacer búsquedas para 'comienza con ...'

div[class^="something"] { } 

que trabajaría en algo como esto: -

<div class="something-else-class"></div> 

y 'termina con ...'

div[class$="something"] { } 

que trabajaría en

<div class="you-are-something"></div> 

Buenas referencias

• CSS3 Attribute Selectors: Substring Matching
• The 30 CSS Selectors you Must Memorize
• W3C CSS3 Selectors

Answer 2

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

Es un selector CSS que selecciona todos los elementos con la clase espectáculo de la red, que tiene un elemento secundario que es la clase contiene el nombre lapso.

Answer 3

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

Sólo estoy familiarizado con las clases de arranque spanX donde x es un número entero, pero si había otros selectores que terminó en span, también caería bajo estas reglas .

Simplemente ayuda a aplicar las reglas generales de CSS.