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