Definition
CSS specificity is the mechanism that determines which style rule wins when two or more rules target the same element. It is calculated from the types of selectors involved: inline styles, IDs, classes, and element selectors each carry a different weight. The rule with the higher specificity is applied over the lower.
In email development this is critical because many email clients and email pre-processing CSS inliner tools treat conflicting rules differently. Two properties can target the same button, and the outcome depends entirely on which selector carries more weight.
Specificity Weights
| Selector Type | Example | Weight |
|---|---|---|
| Inline style | style="color:red" |
Highest (1-0-0-0) |
| ID | #main-button |
1-0-0-0 (often treated as class) |
| Class | .cta-button |
0-1-0-0 |
| Attribute | [type="button"] |
0-1-0-0 |
| Element | a |
0-0-1-0 |
| Universal / inherited | * , parent values |
Lowest |
A common email trap is assuming an inline style beats a class rule. For many cascading email clients this is true, but for some the source of rules and the way styles are inlined changes the outcome.
How Specificity Affects Email Rendering
- Inlined CSS normally wins: Most ESPs and many clients convert styles into inline styles, which carry the highest specificity and override classes.
!importantchanges the game: Some clients honour!important, overriding even inline styles, while others ignore it inconsistently.- Client-specific overrides: Gmail, Apple Mail and Outlook each resolve conflicts slightly differently, making cross-client results hard to predict.
- Media query styles: Rules inside media queries can override base styles if their specificity is equal, which is why ordering matters.
How to Manage Specificity in Email
- Keep specificity predictable: Prefer single classes and avoid unnecessary IDs or deeply chained selectors.
- Inspect final HTML: After your inliner runs, check the actual output rather than assuming the source styles apply.
- Test each client: Use a rendering service to confirm the styles you intended actually win in Gmail, Apple Mail and Outlook.
- Be careful with
!important: Use it sparingly, and only where a client is known to honour it predictably. - Order styles deliberately: Where specificity ties, the later rule wins, so place overrides accordingly.
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
AMP for Email
AMP for Email is a technology that allows interactive, dynamic content to live inside an email message, enabling forms, carousels and live updates.
Frequently Asked Questions
CSS specificity decides which rule applies when two rules target the same element. Rules with more specific selectors win. For example, a class-based rule beats a simple element rule, so a conflict between them resolves in favour of the class.
In some clients, yes. Most cascade-based clients honour inline styles, but others — or specific situations with `!important` rules or inliner quirks — can flip the outcome. The reliable answer is to test in the actual clients your audience uses.
Use clear, modest-specificity selectors, let your ESP inline the styles correctly, and verify the rendered result in multiple clients. Avoid relying on `!important` or deeply nested selectors, which behave unpredictably.
Each client resolves CSS specificity, source ordering and `!important` differently. Gmail aggressively strips and rewrites styles, while Outlook historically uses Word's rendering engine. These differences mean identical markup can produce different winners in different clients.