0

Gostaria de criar um css que quando uma certa classe estivesse em no tamanho xs teria um font-color red e os demais tamanhos esta cor mudaria para green. Porém sem ter que repetir o texto. tipo:

<div class="hidden-xs">
   <div class="Vermelho">
       Teste
   </div>
</div>
<div class="col-xs-12 hidden-sm hidden-md hidden-lg hidden-xl">
   <div class="verde">
       Teste
   </div>
</div>

Queria uma classe teria duas alternativa de cor dependendo do tamanho...

<div class="col-xs-12">
   <div class="Cor">
       Teste
   </div>
</div>

Será que é possivel tal façanha? POde ser em CSS ou JS. Agradeço desde de já pela ajuda

1
  • 1
    importe um ficheiro css, com a seguinte configuração .col-xs-12 {color:red;} .col-sm-12 {color:blue;}
    – urb
    Commented 22/10/2015 às 17:43

2 Respostas 2

1

O CSS 3 permite que você crie seletores usando substrings dos valores de atributos. Por exemplo, se você quiser estilizar links que contém http:// no atributo href, sem ir direto na tag <a>, você poderia fazer isso:

[href*="http://"]{
  color: red;
  font-size: 18pt;
}
<a href="http://pt.stackoverflow.com">Stack overflow</a>

Veja que em nenhum momento atribui nada a tag <a>. Para montar um seletor que atribua regras a tudo que tem a substring -xs nas classes, você pode fazer

[class*="-xs"]{
  color: red;
}

Mas isso não é lá muito performático, pois faz comparações com todos os nomes de classe. Não é uma prática muito boa.

Leia mais sobre isso aqui.

2
  • Muito bom! Não sabia disso! Eu usei o LESS e funcionou Commented 22/10/2015 às 18:44
  • Se a resposta lhe ajudou, aceite-a como a correta! =) Commented 22/10/2015 às 18:48
0

Consegui uma solução alternativa usando o LESS como abaixo:

@media screen and (min-width: 480px) {
 footer div {
      color: rgb(xx, xx, xx);
 }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .