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

Respostas:

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
-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