CSS condicional

[FabianoSouza 5]

Tenho uma situação em que preciso colorir o texto dentro de um elemento.

Caso seu valor seja 0, pinte de uma cor, caso seja maior do que 0 (zero) pinte de outra cor.

 

Como faço isso com CSS puro.

Estou pesquisando e tem a possibilidade de criar condições no CSS....alguém ajuda?

 

Valew!

[Omar~ 87]

Para tal você precisa de pré processadores de css (veja esse por exemplo: sass).

Existe uma desvantagem grande nisso, tempo de carregamento e processamento lento.

 

A melhor forma de executar tal afim é por meio de javascript alterando características do html pós carregado, ou por linguagem de servidor já entregado com html definido ao cliente.

Em ambos dois casos é infinitamente melhor que usar um pré processador.

[michelmir 0]

Dê uma olhada neste exemplo. 

[FabianoSouza 5]

Olá pessoal.

Obrigado pela ajuda.

Vou montar isso com Javascript + HTML + CSS  mesmo.

 

Obrigado.

[ociceromartins 3]

Fabiano,

O projeto que está desenvolvendo é em PHP? Ou HTML e CSS puro?

Se for em PHP ou qualquer outra linguagem processada, acredito que o mais viável seria você faz as condicionais na programação e entregar uma classe pra pintar com CSS.

 

Exemplo em PHP:

<?php
$valor = 10;
switch ($valor) {
	case 1: $cor = 'laranja'; break;
	case 2: $cor = 'verde'; break;
	case 3: $cor = 'azul'; break;
	default: $cor = 'rosa'; break;
}
?>
<div class="cor-<?= $cor; ?>">
  Aqui vem o conteúdo da DIV.
</div>

 

No caso acima, você vai ter o retorno em classes, exemplo:

cor-laranja

cor-verde

cor-azul

cor-rosa

 

Aí é só você criar as classes no CSS e trabalhar como quiser.

 

Um abraço!

[FabianoSouza 5]

Olá @ociceromartins

Muito obrigado pela dica!