¿Cómo hacer que CSS seleccione una ID que comience con una cadena (no en Javascript)?

192

Si el HTML tiene elementos como este:

id="product42"
id="product43"
...

¿Cómo hago coincidir todas las identificaciones que comienzan con "producto"?

He visto respuestas que hacen esto exactamente usando javascript, pero ¿cómo hacerlo solo con CSS?

html css css-selectors

— guptron
fuente

361

[id^=product]

^=indica "comienza con". Por el contrario, $=indica "termina con".

Los símbolos se toman prestados de la sintaxis Regex, donde ^y $significa "inicio de cadena" y "final de cadena" respectivamente.

Consulte las especificaciones para obtener información completa.

— Niet the Dark Absol
fuente

1

Gracias por el método y la explicación, he editado mi pregunta para que sea más clara. Por curiosidad, ¿hay alguna manera de hacer coincidir una cadena dentro de la cadena de la identificación?

— guptron

¡Vea las especificaciones , lo explican mejor que yo!

— Niet the Dark Absol

@itamar: Le agradezco su intento de editar mi respuesta, pero las comillas solo son necesarias si el valor contiene caracteres que no son un identificador válido. productes claramente un identificador válido y, por lo tanto, no necesita comillas.

— Niet the Dark Absol

La especificidad de este tipo de selector es muy baja

— nuander

3

@ Emerald214:not([id^=product])

— Niet the Dark Absol

59

Lo haría así:

[id^="product"] {
  ...
}

Idealmente, usa una clase. Para esto son las clases:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

Y ahora el selector se convierte en:

.product {
  ...
}

— Licuadora
fuente

1

@Blender, gracias, elegí la otra respuesta porque me explica un poco más y entiendo los símbolos que se utilizan. No puedo usar clases para este escenario, de lo contrario, sí, sería mejor.

— guptron

5

Usa el selector de atributos

[id^=product]{property:value}

— Musa
fuente

-1

Noté que hay otro selector de CSS que hace lo mismo. La sintaxis es la siguiente:

[id|="name_id"]

Esto seleccionará todos los ID de elementos que comienzan con la palabra entre comillas dobles.

— Luigi Spezia
fuente

¿Cómo te diste cuenta? ¿referencia?

— Ben Bozorg

Doc para esto aquí: w3.org/TR/selectors-3/#attribute-selectors Esto debería seleccionar todos los id que comiencen o sean iguales a "name_id"

— Dessauges Antoine

att|=valNO es lo mismo que att^=val. De la referencia mencionada: El |=selector "Representa un elemento con el atributo att, su valor es exactamente" val "o comienza con" val " seguido inmediatamente por" - " ." Por lo tanto, una identificación como "product42" no coincidiría con |=, pero "producto-42" lo haría.

— Goozak