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

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 atributo selector de comodines. En la muestra que ha proporcionado, busca cualquier elemento secundario .show-gridque tenga una clase que CONTIENEspan .

Entonces seleccionaría el <strong>elemento 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 funcionaría en algo como esto: -

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

y 'termina con ...'

div[class$="something"] { }

que funcionaría en

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

Buenas referencias

• Selectores de atributos CSS3: coincidencia de subcadenas
• Los 30 selectores CSS que debes memorizar
• Selectores CSS3 W3C

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

Es un selector CSS que selecciona todos los elementos con la clase show-grid , que tiene un elemento hijo cuya clase contiene el intervalo de nombres .

El seguimiento:

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

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

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

Todos los elementos son golpeados, excepto el <span>propio.

En lo que respecta a Bootstrap:

• span6 : esta fue la técnica de andamiaje de Bootstrap 2 que dividió una sección en una cuadrícula horizontal, basada en partes de 12. Por lo tanto span6 lo , tendría un ancho del 50%.
• En la implementación actual de Bootstrap (v.3 y v.4), ahora usa las .col-*clases (por ejemplo col-sm-6), que también especifica un punto de interrupción de medios para manejar la capacidad de respuesta cuando la ventana se reduce por debajo de cierto tamaño. Verifique Bootstrap 4.1 y Bootstrap 3.3.7 para obtener más documentación. Recomendaría ir con un Bootstrap posterior hoy en día

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

Solo estoy familiarizado con las clases bootstrap spanXdonde X es un número entero, pero si hubiera otros selectores que terminaran enspan , también estaría incluida en las presentes bases.

Simplemente ayuda a aplicar reglas generales de CSS.