Skip to main content

Debugging WordPress CSS

CSS overrides that work perfectly in a plain HTML file often seem to "not work" in WordPress. This page is your systematic debugging guide.

1. The Debugging Mindset​

Before adding !important everywhere, diagnose the actual problem:

  1. Is the selector correct? Right class name?
  2. Is the CSS loading? Is the file enqueued?
  3. Is it a specificity battle? Higher-specificity rule is winning.
  4. Is it inline style? Customizer sometimes outputs inline styles.
  5. Is it a caching issue? Old CSS still served.

2. The Browser DevTools Investigation Process​

1. Right-click element → Inspect
2. In the Styles panel, look for your property
3. If crossed out (~~strikethrough~~) → specificity is overriding it
4. If not visible at all → CSS is not loading or the selector is wrong
5. Click on the file:line link to see exactly which file the rule comes from

Reading Specificity in DevTools​

  • Rules at the top of the list (or later in same file) win.
  • Crossed-out rules lost the specificity battle.
  • "element.style" means it's an inline style — the hardest to override.

3. Specificity Escalation Strategy​

Try in this order — stop when it works:

/* Step 1: Add more context (parent class) */
.site-content .your-class { color: red; }

/* Step 2: Add the element type */
div.your-class { color: red; }

/* Step 3: Chain more specific parent selectors */
.site-content .entry-content .your-class { color: red; }

/* Step 4 (WordPress/WC only): Use !important */
.your-class { color: red !important; }

4. WordPress-Specific Gotchas​

Customizer Inline Styles​

GeneratePress Customizer outputs styles as <style> tags in the <head>. These have higher precedence than most enqueued stylesheets (they appear last). To beat them:

/* In Additional CSS — it loads after Customizer inline styles */
.site-header { background: #000 !important; }

Page Builders (GenerateBlocks / Bricks)​

Both generate styles with high-specificity selectors or inline style="" attributes. Solution:

  • In GB: Override via the block's own CSS field.
  • In Bricks: Use Element → Custom CSS → %root%.

WooCommerce Specificity​

WooCommerce uses selectors like .woocommerce div.product .price (high). Match or beat them:

/* Beat WC specificity */
.woocommerce div.product .price { color: var(--color-primary) !important; }

5. Cache: The Silent Killer​

When CSS changes don't appear, the culprit is almost always caching:

Cache LevelHow to Clear
Browser cacheCtrl+Shift+R (hard-reload)
WordPress cache pluginPlugin → Purge/Clear cache
Server cache (Nginx/Redis)Server panel → Purge / service nginx reload
CDN (Cloudflare)Cloudflare → Caching → Purge Everything

[!TIP] Open DevTools → Network tab → check "Disable cache" while working. This forces fresh loads every time.

6. Is My CSS Even Loading?​

In DevTools → Sources → your stylesheet should appear. Or in Network tab, filter by CSS and reload — see if your file appears with status 200.

If not, check:

// functions.php — ensure enqueue is correct
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style'], '1.0.' . time());
    // Using time() busts cache in dev — remove in production!
});

7. Quick Diagnostic Snippets​

Paste these temporarily to confirm your selector is working:

/* Neon red outline — impossible to miss */
.my-element { outline: 3px solid red !important; }

/* confirm the element is selected at all */
.my-element { background: magenta !important; opacity: 0.5 !important; }

Once confirmed, replace with the real styles.

8. Useful Browser Extensions​

ExtensionPurpose
CSS PeeperInspect CSS values without opening DevTools
WhatFontIdentify fonts on any page
ColorZillaPick colors from any pixel
PerfectPixelOverlay a design mockup for px-perfect comparison
StylusInject and test custom CSS on any website