I'm making a kind of "simple notification system" in CSS .
What I want is that when the number of notifications is (0) it stays with display:none; .
I know a way I think it's possible to do.
Ex: .bolinha [style*="text-align:center;"] { display:none; }
Make the same system that changes the element number to change the style.
Following example in PHP, adapt to the language of your system:
// Antes:
echo "<span class=\"bolinha\">$comentarios</span>";
// Mude para:
$estilo=($comentarios==0)?'invisivel':'bolinha';
echo "<span class=\"$estilo\">$comentarios</span>";
Then just create .invisivel {display: none} .
Or with JS:
contador = document.getElementById("contador");
contador.className = (contador.innerHTML == '0')?'invisivel':'bolinha';
Do not forget to id="contador" in the element, or update the existing JS pro id.
See the demo on JSFiddle (change the value and press Run).
Unfortunately, using only CSS , you can not select an element by its text. One option would be to put an attribute on this element to differentiate it, eg:
In your span element, place an attribute, for example data-value :
<span class="bolinha" data-value="0">0</span>
And in CSS, do:
span.bolinha[data-value="0"]{display:none;} /*Oculta o elemento com data-value="0"*/
Example: JSFiddle