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;
}
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:
Mais informações sobre os seletores de atributos CSS, você pode encontrar aqui e aqui. E a partir de MDN Docs MDN Docs.
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.
Uma solução alternativa:
div[class|='tocolor']
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)
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)