Starting a website?

Purpose-Built Templates

ZU2B Blueprints

Business in a Box

Reference

ZU2B Pulse™

See what visitors experience before they leave — paste any public URL and get a plain-English performance report in seconds.

Scan Your URL Free
FAQ • Support

Shared CSS class used across sections causes unintended color changes

Field Note #181
🔬 Confirmed 🟢 Beginner ⏱ 30 Minutes ✓ Observation from Experience
The symptom
A section heading appeared in dark navy text on a dark background, making it unreadable. Changing the color via WPCode fixed it for that heading, but risked changing the same heading class used by headings on white-background sections elsewhere on the page.

Why it happens
The heading used a shared CSS class (`.zre-section-h`) applied to multiple headings throughout the page. Some of those headings sit on white/light backgrounds where dark text is correct; the one in the dark-background section needs white text. A single color rule on the shared class cannot serve both simultaneously.

What to check
1. Identify which sections use the same heading class.
2. Determine which sections have dark vs. light backgrounds.
3. A single `color` value on the class cannot be correct for both.

The fix
Two options:
– **Scope it contextually:** Add a CSS rule that targets the class only within its dark parent: `.zre-dark-section .zre-section-h { color: #fff; }` — no class rename needed.
– **Add a modifier class:** Give the dark-section heading an additional class (`zre-section-h–white`) and target that with `color: #fff`. Cleaner if the pattern repeats.
 
For a one-off fix, the WPCode snippet approach works: `.zre-grid-section .zre-section-h { color: #fff !important; }` scoped to the specific parent container.

Lesson
Shared CSS classes on pages cause conflicts whenever the same element type appears in both dark and light contexts. Either scope color rules to their parent container, or use modifier classes for context-specific variants. This is especially relevant for WordPress showcases using a single injected stylesheet where `!important` is already common.

Tagged in :

More from the field