Title: CSS Not Applying in Theme
Last modified: August 24, 2016

---

# CSS Not Applying in Theme

 *  [Lery](https://wordpress.org/support/users/lery/)
 * (@lery)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/)
 * Unfortunately I cannot share the website I’m working on with you as it’s internal.
   Here is my problem:
 * I want to hide a div. I right click on the element in Chrome and choose Inspect
   Element. This takes me to the element. I add the following code:
 * visibility:hidden;
 * When doing that it hides the element just like I want it to. I now copy the CSS
   to my style.css and save it. When I refresh the page, the element is not hidden.
 * Does anyone have any idea what I could be doing wrong?
 * The CSS format is as follows:
 * #view test {
    visibility:hidden; }

Viewing 7 replies - 1 through 7 (of 7 total)

 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960595)
 * >  #view test
 * That doesn’t look like a valid selector – test is not an HTML tag so would not
   be valid that way.
 *  Thread Starter [Lery](https://wordpress.org/support/users/lery/)
 * (@lery)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960602)
 * Sorry that was just an example and is not the actual code.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960606)
 * Unfortunately, there’s really no way to help with CSS without seeing a live site.
   Inspect Element should be showing you the CSS affecting any element on the page.
   If it’s there but not working, chances are that your CSS is not specific enough.
   If it’s not visible, chances are you have an error in the CSS or in CSS above
   the part that’s not working.
 *  Thread Starter [Lery](https://wordpress.org/support/users/lery/)
 * (@lery)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960650)
 * Thanks WPyogi, I understand. It’s odd because when I inspect the element I temporarily
   change the CSS. I add the visibility:hidden; to the selector and it works. Oh
   well.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960659)
 * Do you have any caching plugins on your site? If so try clearing those and also
   your browser cache. Might be hanging things up.
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960664)
 * 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](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).
   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](http://www.snook.ca/archives/html_and_css/understanding_c/),
   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.
 *  Thread Starter [Lery](https://wordpress.org/support/users/lery/)
 * (@lery)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960693)
 * I use Wordfence which does caching. I cleared that and still the element I’m 
   trying to hide shows.
 * [@crouchingbruin](https://wordpress.org/support/users/crouchingbruin/), Thank
   you for the detailed explanation! I think you discovered the issue. This is a
   third party plug-in that I’m using. When I inspect the page using Chrome Developer
   Tools, I see that the style sheet is being called outside of my site to the plug-
   ins cloud site! Sneaky! So, when I add, for example, the following code:
    #ace_widget{
   visibility: hidden; } I don’t think that is even being recognized. I tried adding!
   important just to see if that would work, and it doesn’t.
 * Also using the Chrome Developer inspector, I do not see my visibility:hidden;
   displayed. However, I know it works because using the Chrome Developer inspector,
   I can add the visibility:hidden and it hides the element.
 * Is there any way around this?

Viewing 7 replies - 1 through 7 (of 7 total)

 The topic ‘CSS Not Applying in Theme’ is closed to new replies.

 * 7 replies
 * 3 participants
 * Last reply from: [Lery](https://wordpress.org/support/users/lery/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/css-not-applying-in-theme/#post-5960693)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics