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

190

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?

css css-selectors jon
fuente
1
api.jquery.com/attribute-contains-selector
biziclop
1
Muchos selectores geniales de CSS disponibles: w3.org/TR/selectors/#selectors
Tim Medora
jsbin.com/otizoz/edit#javascript,html,live
Roko C. Buljan
Similar pero no un duplicado completo, stackoverflow.com/questions/7366323/… (que enlaza aquí)
BoltClock

Respuestas:

332

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

isNaN1247
fuente
1
Sé que esta es una respuesta antigua, pero agregaría esta referencia a la lista de referencias: w3.org/TR/css3-selectors
Dread Boy
2
Me gustaría agregar otra referencia en caso de que las personas encuentren esto útil: AllCssSelectors.com
user3339411
66
El div[class^="something"] { }selector "comienza con" solo funciona si el elemento contiene una sola clase, o si es múltiple, cuando esa clase es la primera a la izquierda.
Nahn
2
Agregaría div[class~="something"]para encontrar coincidencias en listas separadas por espacios (por ejemplo, clases) y div[class|="something"para hacer coincidir en una lista separada por guiones, por ejemplo, hacer coincidir algo en el nombre de clase de you-are-something anterior
Ruskin
31 
.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 .

Spikeh
fuente
15
en realidad, selecciona el "elemento hijo cuya clase contiene el intervalo de nombres" y no "todos los elementos con la clase show-grid"
Utopik
3

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
Tyler
fuente
2

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.

Kevin Li
fuente