Skip to main content

Our email CSS engine is open source. Give it a star on GitHub 

Emailens
Sign in

Client Targeting Generator

The selector or conditional that reaches one client and leaves the rest alone, filled with your CSS. When a client has none, it says so.

@emailens/engine 0.18.22 · data last changed 10 Nov 2026

Presets:
Your targeting block

Updates as you type. u + .body Selector Hack for Gmail.

targeting.html
7 lines
<style type="text/css">
  u + .body .cta-button {
    background-color: #776336 !important;
    color: #ffffff;
    padding: 12px 24px;
  }
</style>

The checker needs a computer screen.

About this technique
safeu + .body Selector Hack

Gmail transforms the body element and inserts an underlying u tag into the rendered DOM hierarchy, allowing precise scoping.

Add this block to your email head style sheet. Inline CSS overrides class rules unless the rule is marked !important.

Progressive enhancement vs. brittle hacks

Email client targeting hacks exist because email clients use vastly different rendering engines (WebKit, Blink, Microsoft Word, Gecko). While universal modern CSS is the ideal goal, progressive enhancement often requires applying layout fixes or dark-mode overrides to one stubborn client without affecting another.

Whenever possible, prefer safe structural techniques (like conditional comments for Outlook Classic or documented attribute selectors like [data-ogsc]) over vendor CSS parsing bugs.

Your next question

Other free tools: HTML Email Checker · CSS Support Lookup · CSS Inliner · Dark Mode Preview · Outlook Ghost Table Generator · Outlook VML Background Generator · Bulletproof Button Generator · Email Rendering Playground

Run this check on every email

The open-source CLI reads the targeting in every template, free: npx @emailens/cli lint email.html (CLI docs).

GitHub Action (Pro). Pro is $19 a month. The pre-send gate in CI, and the history behind every check. See the plans →

Questions

How do you target Gmail with CSS?

Gmail rewrites email doctypes and prepends an empty <u></u> immediately before the element inheriting your body tag. By placing a class on your body element (e.g. <body class="body">), you can target Gmail web and mobile using the selector 'u + .body .your-class'.

How do you target Outlook desktop (Word engine)?

Outlook Classic on Windows (2007-2021) renders with Microsoft Word. It is best targeted using conditional comments: <!--[if mso]> ... <![endif]--> for Outlook-only markup, or <!--[if !mso]><!--> ... <!--<![endif]--> to hide modern CSS from Outlook. Outlook (New) is not built on Word and ignores both.

How do you target Outlook Web dark mode?

When Outlook.com inverts colors in dark mode, it injects [data-ogsc] (for text colors) and [data-ogsb] (for background colors). You can override dark mode styling by styling '[data-ogsc] .your-class' or '[data-ogsb] .your-class'.

Why do email client hacks deprecate?

Email client webmail interfaces update regularly. Hacks that rely on unintended bugs (like parsing invalid media queries or unescaped CSS comments) often get patched. Each technique here says which clients it reaches. When a client has no reliable hack, the tool says so instead of guessing.

Can Emailens tell me which targeting I already used?

Yes. Paste the compiled email into the checker: the Client Targeting report lists techniques that still match, flags deprecated ones, and does not fail Outlook for CSS that was scoped to Gmail.