0

I have this in my print CSS:

.foo
{
    display: none;
}

.bar
{
    display: none;
}

All class="foo" elements are hidden, but all class="bar" elements are still visible. What could be the cause of this?

user247702
  • 23,641
  • 15
  • 110
  • 157

1 Answers1

1

CSS specificity could be overruling your print CSS rules. The simplest way to resolve this is to add !important to your rules. While generally this should be avoided, it's fine to use it in a print CSS.

.bar
{
    display: none !important;
}

The other way is to make sure your print CSS rules come out on top in the specificity calculation. The exact way to do this depends entirely on your regular CSS rules.

Community
  • 1
  • 1
user247702
  • 23,641
  • 15
  • 110
  • 157
  • How did you manage posting question and answering it at the same time? – Manoz Jan 27 '14 at 14:28
  • @Manoz There's a checkbox to let you answer your own question when asking it. – user247702 Jan 27 '14 at 14:29
  • @Manoz You can answer your own Question while creating it, by checking the "Answer my own question" checkmark – TheYaXxE Jan 27 '14 at 14:30
  • This is pretty tiny thing on that I never payed attention. BTW @Stijn, You solved my headache of css rules by answering it on your own. – Manoz Jan 27 '14 at 14:33