Are you adding the CSS to a child theme’s style.css file, or are you editing the theme’s style.css file? After you add your rule, can you see it in the right-pane of Chrome DevTools when you inspect the element? Is the visibility property showing up as struck-out in your new rule?
One reason that your CSS rule might not be working is that there’s another rule with the same selector but that rule comes after your child theme’s style.css file, so the second rule has precedence.
For example, let’s say you’re trying to hide a widget that comes from a particular plugin. You inspect the widget using Chrome DevTools and you see that the widget has a rule that looks like this:
#ace_widget {
visibility: visible;
}
So you try adding a rule to your child theme’s style.css file that looks like this:
#ace_widget {
visibility: hidden;
}
But the rule doesn’t seem to work. You look at the source for the original rule, and you see it’s coming from an external CSS file called /plugins/acewidget/ace.css, and if you do a view source on your page, you see that the ace.css file comes after your child theme’s CSS file. So the problem would be that since both rules have the same specificity, the latter rule would take effect. The solution would be to alter your selector to have a higher specificity. For example, if the widget were in a sidebar that has a class of sidebar, you could alter the rule to look like this:
.sidebar #ace_widget {
visibility: hidden;
}
Then your rule would override the rule in the plugin’s CSS file. To test whether or not you are having a problem with specificity, you can try adding the !important clause to your property like this:
#ace_widget {
visibility: hidden !important;
}
If this makes the rule work, then you probably just have an issue with making your selector more specific. You should note, however, that you shouldn’t leave the !important clause in there, even though it made your rule work.
Now if adding the !important clause still did not make your rule work, then take a look to make sure you don’t have a syntax error in your CSS file. Oftentimes I will see a CSS file with a missing right brace }, which invalidates the rest of the CSS in that file.
