curinga * em CSS para classs

Eu tenho esses divs que estou estilizando com .tocolor , mas eu também preciso do identificador único 1,2,3,4 etc. então estou adicionando isso como outra class tocolor-1 .

 
tocolor 1
tocolor 2
tocolor 3
tocolor 4
.tocolor{ background: red; }

Existe uma maneira de ter apenas 1 class tocolor-* . Eu tentei usar um curinga * como neste css, mas não funcionou.

 .tocolor-*{ background: red; } 

O que você precisa é chamado de seletor de atributos. Um exemplo, usando sua estrutura html, é o seguinte:

 div[class^="tocolor-"], div[class*=" tocolor-"] { color:red } 

No lugar de div você pode adicionar qualquer elemento ou removê-lo completamente, e no lugar da class você pode adicionar qualquer atributo do elemento especificado.

[class^="tocolor-"] – começa com “tocolor-“.
[class*=" tocolor-"] – contém a substring “tocolor-” que ocorre diretamente após um caractere de espaço.

Demonstração: http://jsfiddle.net/K3693/1/

Mais informações sobre seletores de atributos CSS, você pode encontrar aqui e aqui .

Sim você pode isso.

 *[id^='term-']{ [css here] } 

Isso selecionará todos os códigos que começam com 'term-' .

Quanto ao motivo de não fazer isso, vejo onde seria preferível selecionar esse caminho; Quanto ao estilo, eu não faria isso sozinho, mas é possível.

Uma solução alternativa

div[class|='tocolor'] corresponderá aos valores do atributo “class” que começam com “tocolor-“, incluindo “tocolor-1”, “tocolor-2” etc.

Cuidado que isso não vai combinar

Referência: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Representa um elemento com o atributo att, seu valor sendo exatamente “val” ou começando com “val” seguido por “-” (U + 002D)

Se você não precisar do identificador exclusivo para estilizar ainda mais os divs e estiver usando o HTML5, tente usar atributos de dados personalizados. Leia aqui ou tente uma pesquisa no google por HTML5 Custom Data Attributes