4

Estou fazendo uma espécie de "sistema de notificações" bem simples em CSS.

O que eu quero, é que quando o número de notificações for (0) ele fique com display:none;.

Conheço um jeito que eu acho que é possível fazer.

Ex: .bolinha [style*="text-align:center;"] { display:none; } <- Acho que é possível adapta-lo, só não sei como fazer.

Vou deixar uma imagem ilustrando para um melhor entendimento:

inserir a descrição da imagem aqui

2 Respostas 2

6

Faça o mesmo sistema que muda o número do elemento mudar o estilo.

Segue exemplo em PHP, adapte para a linguagem do seu sistema:

// Antes:
echo "<span class=\"bolinha\">$comentarios</span>";

// Mude para:
$estilo=($comentarios==0)?'invisivel':'bolinha';
echo "<span class=\"$estilo\">$comentarios</span>";

Aí basta criar o .invisivel {display: none}.

Ou com JS:

contador = document.getElementById("contador");
contador.className = (contador.innerHTML == '0')?'invisivel':'bolinha';

Não esqueça de por o id="contador" no elemento, ou atualizar o JS pro id já existente.

Veja o demo no JSFiddle (mude o valor e aperte Run).

6
  • Para ser mais claro, quero integrá-lo ao WHMCS. E ele não é de código aberto, ou seja, é tudo criptografado. Queria algo somente com CSS. :( 4/06/2014 às 3:33
  • Nem JS dá pra por?
    – Largato
    4/06/2014 às 3:36
  • Sim!!!!!!!!!!! :D :D :D :D 4/06/2014 às 3:37
  • Eu já iria perguntar se era possível com JS. :D 4/06/2014 às 3:38
  • 2
    @AlexandreLopes só não esqueça que se for um JS que atualiza o contador, você deve incluir estas duas linhas dentro do atualizador, ou chamar com algum timer. Aí só vendo o caso concreto mesmo.
    – Largato
    4/06/2014 às 4:08
3

Infelizmente usando apenas CSS não é possível selecionar um elemento pelo seu texto. Uma opção seria colocar um atributo neste elemento para diferenciá-lo, exemplo:

Em seu elemento span, coloque um atributo, por exemplo data-value:

<span class="bolinha" data-value="0">0</span>

E no CSS, faça:

span.bolinha[data-value="0"]{display:none;} /*Oculta o elemento com data-value="0"*/

Exemplo: JSFiddle

3
  • Excelente dica! 4/06/2014 às 20:48
  • Vou usar a dica do @Bacco para esse projeto, e vou usar sua brilhante dica para outro projeto! Vai ficar muito legal! Obrigadooooo...... 4/06/2014 às 20:58
  • @AlexandreLopes fico feliz em ajudar.
    – abfurlan
    4/06/2014 às 23:10

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 .