curinga * em CSS para classes

670

Eu tenho essas divs com as quais estou estilizando .tocolor, mas também preciso do identificador exclusivo 1,2,3,4 etc., então estou adicionando-o 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 aula tocolor-*. Tentei usar um curinga *como neste css, mas não funcionou.

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— Twitter
fonte

1

Aqui está o site oficial CSS3 sobre seletores: w3.org/TR/css3-selectors e uma lista compability: findmebyip.com/litmus

— GarfieldKlon

1216

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 divvocê pode adicionar qualquer elemento ou removê-lo completamente, e no lugar de classvocê pode adicionar qualquer atributo do elemento especificado.

[class^="tocolor-"]- começa com "tocolor-".
[class*=" tocolor-"]- contém a substring "tocolor-" ocorrendo 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 . E do MDN Docs MDN Docs

— Sotiris
fonte

2

Informação legal. Apenas uma ressalva é que se o desempenho for um problema, a maioria dos linters CSS rejeitará seletores de atributos que se assemelham a regex (por exemplo, usando '*') b / c de desempenho lento. Com exceção do uso de um pré-processador (por exemplo, Sass), existe alguma outra maneira possível de fazer isso?

— CodeFinity 29/09

2

Existe uma maneira de verificar se o atributo de classe contém várias substrings? Talvez algo assim div[class*="foo"][class="bar"]?

— Connor

Esse espaço no nosso exemplo "contém" é bastante matador. Pelo que posso ver, não deveria estar lá, correto?

— Thomas

1

@Thomas que é necessário para assegurar class="foo tocolor-red"partidas, mas nãoclass="foo fromtocolor-red-blue"

— aleclarson

Obrigado por isso. Eu uso essa técnica há alguns anos, mas nunca percebi que a classe ^ = se aplica apenas ao início da entrada da classe HTML. Eu pensei que se aplicava a todos os nomes de classe definidos para a tag HTML.

— BevansDesign

108

Sim, você pode isso.

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

Isso selecionará todos os IDs que começam com 'term-'.

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

— thomas.han
fonte

Obrigado por este IDadendo baseado, não apenas por class.

— Khom Nazid

26

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 para que isso não corresponda

<div class="foo tocolor-">

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" imediatamente seguido por "-" (U + 002D)

— adroitec
fonte

12

Isso não funcionará se o classatributo começar com outra classe que não começa tocolor.

— BoltClock

1

Isso também funciona muito bem no styleSheets do widget do Qt. Por exemplo, para aplicar um estilo a todos os marcadores nomeados foo*, você fariaQLabel[objectName|='foo'] { ... }

— Reintegrar Monica

Como o @BoltClock disse, essa solução é interrompida se o elemento tiver várias classes e eles não começarem com a classe que o OP está procurando.

— Dan Dascalescu

Não funciona no Chrome 78, * e ^ funcionam.

— Gordon Mohrin

3

Se você não precisar do identificador exclusivo para obter mais estilo das divs e estiver usando o HTML5, tente usar Atributos de dados personalizados. Leia aqui ou tente uma pesquisa no google porHTML5 Custom Data Attributes

— DKSan
fonte