asterisco * no CSS para as aulas

Tenho estes mergulhos que I'm estilizo com .tocolor, mas também preciso do identificador único 1,2,3,4 etc., então I'm adiciono isso como outra classe tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Existe uma maneira de ter apenas 1 classe tocolor-*. Eu tentei usar um wildcard * como neste css, mas não funcionou't funciona.

.tocolor-*{
  background: red;
}
Leandro
Pergunta editada :em
Programação
css wildcard css-selectors
24º fevereiro 2011 в 8:46
50 vistas
Comentários sobre a pergunta (1)
Solução

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

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

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

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

Demo: http://jsfiddle.net/K3693/1/

Mais informações sobre os seletores de atributos CSS, você pode encontrar aqui e aqui. E a partir de MDN Docs MDN Docs.

davidhartman00
Resposta editada :em
Comentários (5)

Sim, você pode fazer isso.

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

Isto irá selecionar todas as ids que começam com 'term-'.

Quanto ao motivo de não fazer isso, vejo onde seria preferível selecionar dessa forma; quanto ao estilo, eu não'não o faria eu mesmo, mas isso'é possível.

user3071284
Resposta editada :em
Comentários (1)

Uma solução alternativa:

div[class|=&#39;tocolor&#39;] irá corresponder aos valores do "class" atributo que começa com "tocolor-", incluindo "tocolor-1", "tocolor-2", etc.

Cuidado para que isto ganhe't combine

<div class="foo tocolor-">

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

[att|=val]

Representa um elemento com o atributo atestado, sendo o seu valor exactamente "val" ou começando com "val" imediatamente seguido por "-" (U+002D)

PierreDuc
Resposta editada :em
Comentários (3)

Se você não'não precisa do identificador exclusivo para mais estilo dos mergulhos e está usando HTML5, você pode tentar ir com Atributos de Dados personalizados. Leia em aqui ou tente uma busca no google por `HTML5 Custom Data Attributes' (Atributos de Dados Personalizados)

Comentários (0)