Si el HTML tiene elementos como este:¿Cómo hacer que CSS seleccione ID que comienza con una cadena (no en Javascript)?
id="product42"
id="product43"
...
¿Cómo puedo coincidir con todos los identificadores que empiezan por "producto"?
He visto respuestas que hacen esto exactamente usando javascript, pero ¿cómo hacerlo solo con CSS?
[id^=product]
^= indica "comienza con". Por el contrario, $= indica "termina con".
Los símbolos se toman prestados de la sintaxis Regex, donde ^ y $ significan "inicio de cadena" y "fin de cadena" respectivamente.
Consulte the specs para obtener información completa.
lo haría así:
[id^="product"] {
...
}
Lo ideal es utilizar una clase. Esto es lo que las clases son para:
<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>
Y ahora se convierte en el selector:
.product {
...
}
@Blender, gracias, elegí la otra respuesta porque me explica un poco más y comprende los símbolos que se usan. No puedo usar clases para este escenario, de lo contrario, sí, sería más agradable. – guptron
Utilice la attribute selector
[id^=product]{property:value}
Me di cuenta de que hay otro selector de CSS que hace lo mismo. La sintaxis es la siguiente:
[id|="name_id"]
Esto seleccionará todos los elementos de identificación que comienza con la palabra entre comillas dobles.
No funciona –
¿Cómo se dio cuenta? ¿referencia? –
Gracias por el método y la explicación, he editado mi pregunta para que quede más claro. Por curiosidad, ¿hay alguna manera de hacer coincidir una cadena dentro de la cadena de identificación? – guptron
Ver [las especificaciones] (http://www.w3.org/TR/css3-selectors/#attribute-substrings), ¡lo explican mejor que yo! –
@itamar: Agradezco su intento de editar mi respuesta, pero solo se requieren citas si el valor contiene caracteres que no son un identificador válido. 'product' es claramente un identificador válido, y por lo tanto no necesita comillas. –