Site Designer Guide
class id specificity css debugging override

Class vs. ID — confusion and fixes

CSS specificity is one of the most common sources of “my styles aren’t applying” confusion in Site Designer. When both a class and an ID target the same element, the ID always wins — even if the class rule appears later in the stylesheet. Here’s why that matters and how to fix it.

The specificity problem

CSS specificity determines which rule wins when two rules target the same element and property. The specificity hierarchy, from strongest to weakest:

  1. Inline styles (style="…" directly on the element)
  2. ID selectors (#my-id)
  3. Class selectors (.my-class), attribute selectors, and pseudo-classes
  4. Element selectors (div, p, h1)

An ID selector has a specificity score roughly 10× stronger than a class selector. That means a style set via an ID will always override a style set via a class on the same element — even if the class rule appears later in the CSS.

In practice: If you styled an element with an ID rule (#hero { color: red; }) and then later try to change the color via a class (.new-color { color: blue; }), the ID rule will still win and the color stays red. The change you made “doesn’t apply” — which is confusing if you don’t see the ID rule.

How to spot the conflict in Site Designer

Open the CSS pane for the element showing the problem. Rules that are being overridden show with a strikethrough on the property value. If your new class’s property is struck through, a higher-specificity rule exists.

Click on the struck-through rule to see which selector it’s being overridden by. If you see an ID selector in the override, that’s your culprit.

IDs must be unique

There’s a second reason to avoid ID-based styling: IDs must be unique per page. If you duplicate an element that has an ID (common when copying a section layout), you end up with duplicate IDs — invalid HTML that breaks JavaScript targeting and can cause unpredictable behavior.

The fix: remove ID styling, use classes

The cleanest fix is to remove the ID-based CSS rule entirely and use only class-based rules for styling.

In Site Designer:

  1. Open the CSS pane for the element.
  2. Find the rule prefixed with # (the ID rule).
  3. Delete the offending property from the ID rule — or delete the entire ID rule if it was used only for styling.
  4. Create or use a class to hold the styles instead.

If the ID rule was auto-generated by Site Designer and you don’t need the ID for JavaScript targeting, you can remove the ID from the element entirely: go to Content pane → Attributes and delete the id attribute.

Recommendation: never use IDs for styling

A practical rule that prevents this class of problem entirely:

  • IDs are for JavaScript and anchor links. Use them to target a specific element in JS (document.getElementById) or as an anchor destination (<a href="#section">Jump to section</a>).
  • Classes are for styling. Every style rule should use a class selector.

Site Designer’s Style pane always creates class-based rules. The conflict arises when ID rules are added in the custom CSS editor or imported from a framework. Keep ID rules out of your stylesheet and you’ll never hit this problem.