Como fazer com que o CSS selecione o ID que começa com uma string (não em Javascript)?

192

Se o HTML tiver elementos como este:

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

Como faço para corresponder todos esses IDs começando com "produto"?

Já vi respostas que fazem isso exatamente usando javascript, mas como fazê-lo apenas com CSS?

html css css-selectors

— guptron
fonte

361

[id^=product]

^=indica "começa com". Por outro lado, $=indica "termina com".

Os símbolos são realmente emprestados da sintaxe Regex, onde ^e $significam "início da sequência" e "fim da sequência", respectivamente.

Veja as especificações para obter informações completas.

— Niet, o Escuro Absol
fonte

1

Obrigado pelo método e explicação, editei minha pergunta para ficar mais clara. Por curiosidade, existe uma maneira de combinar uma string dentro da string do id?

— guptron

Veja as especificações , eles explicam melhor do que eu!

— Niet the Dark Absol

@itamar: Agradeço sua tentativa de editar minha resposta, mas somente serão necessárias citações se o valor contiver caracteres que não sejam um identificador válido. producté claramente um identificador válido e, portanto, não precisa de aspas.

— Niet the Dark Absol

A especificidade deste tipo de selector é muito baixo

— nuander

3

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

— Niet the Dark Absol

59

Eu faria assim:

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

Idealmente, use uma classe. É para isso que servem as classes:

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

E agora o seletor se torna:

.product {
  ...
}

— Liquidificador
fonte

1

@ Blender, obrigado, escolhi a outra resposta, porque ela me explica um pouco mais e entende os símbolos que estão sendo usados. Não posso usar classes para esse cenário, caso contrário, sim, seria melhor.

— guptron

5

Use o seletor de atributos

[id^=product]{property:value}

— musa
fonte

-1

Notei que há outro seletor de CSS que faz a mesma coisa. A sintaxe é a seguinte:

[id|="name_id"]

Isso selecionará todos os IDs dos elementos que começam com a palavra entre aspas duplas.

— Luigi Spezia
fonte

Como você percebeu? referência?

— precisa saber é o seguinte

Doc para este aqui: w3.org/TR/selectors-3/#attribute-selectors Isso deve selecionar todos id que iniciar ou igual a "name_id"

— Dessauges Antoine

att|=valNÃO é o mesmo que att^=val. A partir da referência mencionada: O |=seletor "Representa um elemento com o atributo att, seu valor sendo exatamente" val "ou começando com" val " imediatamente seguido de" - " ." Portanto, um ID como "product42" não seria correspondido por |=, mas o "produto 42" seria.

— Goozak 10/01