Gmail CSS Selectors

Just a quick question about something that's confusing me. I was reading through the supported CSS documentation, it states that Google Gmail does not support selectors such as `E#id` or `E.classname`, but does support selectors like `E > F` and `E[foo]`.

My problem comes, above that it says that Gmail does not support `<style> in <head>` or `<style> in <body>`, in which case where have these CSS selectors been put to identify them working? As far as I know there isn't anywhere else I can have a CSS selector? Unless it's talking about an external CSS document??

paulw paulw, 2 years ago

Hey Chris!

This is a great question! Gmail does behave a little strangely here, but we wanted to make sure we were as accurate as possible with the CSS guide so thought it best to include this anomaly :)

Webmail Gmail does support a handful of attribute selectors, but with unexplainable choosiness. In the test which was conducted to determined the information shown on the CSS guide, we placed a variety of selectors within <style>, in the <head> of an HTML document. We did not inline the styles on import. Upon sending and receiving a test email, we noticed that while most of the stylesheet was ignored, a few of the attribute selectors worked, albeit prefixed with unusual element/class names.

As it turns out, Gmail takes the stylesheet in head and converts it into a new one that looks like this:

<style>div.m14031b552319ad08 *{color:blue}div.m14031b552319ad08 span.firstspan{color:purple}div.m14031b552319ad08 span[title]{color:green}div.m14031b552319ad08 span[title="tar"]{color:orange}div.m14031b552319ad08 span[title~="barz"]{color:red}div.m14031b552319ad08 span[title^="bar"]{color:purple}... </style>

To make things stranger, not all the styles in the new stylesheet are applied - just a handful of attribute selectors, it seems.

Generally we only see CSS properties applied to elements if they are moved/copied inline first, but these few attribute selectors seem to be the exception to this rule. As it's very much the exception, we've recorded "No" results for both "Style Element" and "Link Element" under "Google Gmail".

Hope that helps! As always, please do let us know if you have any other questions at all :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
ChrisNicholson, 2 years ago

Thanks for your response Paul. I'll tell you my 'plan' and maybe you can say if it'll work reliably. As stated Gmail does not support `E.classname`, however it does have support for `E[foo="bar"]`. My bright idea was to have a <style> in the <head> which, for each style, had two selectors:

E.classname,
E[class="classname"] { ... }

Do you know if this has been tested / works? If not I'll soon find out!

paulw paulw, 2 years ago

Hey Chris,

I don't think this method has been tested out, it would be great to know if it worked well! Generally it's best to move your styles inline to make sure the CSS is applied correctly. The system will automatically move your CSS inline when using templates or importing a HTML file, but you can also use our standalone inlining tool here: inliner.cm to see how that would work.

Hope that could work for you, please feel free to drop an email to support if you need any further help.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098