.netease_mail_readhtml .your-class-name, .netease_mail_readhtml .your-class-name {
/* Replace this comment with your styles */
}
Email is wrapped with class="netease_mail_readhtml". CSS is prefixed with the same but will only apply to the first class in a list. So with this code the first class gets double prefixed, the second one works.
.bloop_container .your-class-name {
/* Replace this comment with your styles */
}
_:-webkit-full-screen, :root .your-class-name {
/* Replace this comment with your styles */
}
@media screen and (pointer) {
.your-class-name {
/* Replace this comment with your styles */
}
}
@media screen and (min-width:0\0) {
.your-class-name {
/* Replace this comment with your styles */
}
}
This broken media query will also show in Outlook 00–03 so you may need to add an IE conditional comment.
_:-webkit-full-screen, :root .your-class-name {
/* Replace this comment with your styles */
}
This won’t render on iOS devices but will render on desktop so may need a max-device-width media query.
_:-webkit-full-screen, :root .your-class-name {
/* Replace this comment with your styles */
}
This won’t render on iOS devices but will render on desktop so may need a max-device-width media query.
.body {
/* Replace this comment with your styles */
}
AOL also removes class from the body tag so you can use .body to avoid AOL.
.Singleton .your-class-name {
/* Replace this comment with your styles */
}
[class^="apple-mail"] .your-class-name {
/* Replace this comment with your styles */
}
Targets both iOS and MacOS Applemail.
If the color-scheme is set to light dark or auto then the class is removed and this may no longer work.
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .your-class-name {
/* Replace this comment with your styles */
}
Targets both iOS and MacOS Applemail, as well as Outlook on Mac.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) and (hover: none) {
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root body:not(.Singleton) .your-class-name {
/* Replace this comment with your styles */
}
}
Media queries detect the device size to filter out iPhones. Using :not(.Singleton) filters out Apple Mail desktop. Depending on the exact device or on the users resolution settings, this may not work on all iPads. For the same reasons it may also target some iPhones.
.mail-detail-content .your-class-name {
/* Replace this comment with your styles */
}
Comcast wraps code with class="mail-detail-content". This also targets Libero, Ionos, Xfinity.
#edo-container .your-class-name {
/* Replace this comment with your styles */
}
Will cover both iOS and Android.
.edo-email-view .your-class-name {
/* Replace this comment with your styles */
}
.edo .your-class-name {
/* Replace this comment with your styles */
}
.v1your-class-name {
/* Replace this comment with your styles */
}
or
[class="v1your-class-name"] {
/* Replace this comment with your styles */
}
Free.fr prepends v1 to class names
body[marginwidth][marginheight] .your-class-name {
/* Replace this comment with your styles */
}
#msgBody .your-class-name {
/* Replace this comment with your styles */
}
meta ~ * .your-class-name {
/* Replace this comment with your styles */
}
or
title ~ * .your-class-name {
/* Replace this comment with your styles */
}
The head and body structure of the email is removed, making content in the head, siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.
@media screen and (max-width: 480px) {
u + .body .gmailmobile {
display: block!important;
}
}
u + .body .your-class-name {
/* Replace this comment with your styles */
}
Gmail changes the doctype to <u></u>. This is placed adjacent to a div that inherits class and id from the body tag.
You must include a doctype tag.
div > u + .body .your-class-name {
/* Replace this comment with your styles */
}
Gmail changes the doctype to <u></u>. This is placed adjacent to a div that inherits class and id from the body tag.
You must include a doctype tag.
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
/* Replace this comment with your styles */
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
u + .body .your-class-name {
/* Replace this comment with your styles */
}
}
Media queries detect the device size to filter out iPhones and Gmail Webmail.
u + .body .your-class-name {
/* Replace this comment with your styles */
}
Any class or ID name prefixed with an unsupported character will kill all the styles following it.
body[style*="overflow-wrap:break-word"] {
/* Replace this comment with your styles */
}
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.your-class-name {
/* Replace this comment with your styles */
}
}
[class^="apple-mail"] .your-class-name {
/* Replace this comment with your styles */
}
Also targets Apple Mail 12.4 on desktop.
If the color-scheme is set to light dark or auto then the class is removed and this no longer works.
@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1) {
.your-class-name {
/* Replace this comment with your styles */
}
}
-webkit-overflow-scrolling:touch is only supported on mobile devices.
aspect-ratio is not supported on older versions of iOS.
.mail-detail-content .your-class-name {
/* Replace this comment with your styles */
}
Libero wraps code with class="mail-detail-content". This also targets Comcast, Ionos, Xfinity.
#inbox-html-wrapper .your-class-name {
/* Replace this comment with your styles */
}
This must be placed in the <body> of the message as the <head> gets removed.
#cm_mail_smart_body .your-class-name {
/* Replace this comment with your styles */
}
.body > div > div > .wrapper .your-class-name {
/* Replace this comment with your styles */
}
Nine inserts a couple of divs between the body and the wrapper. Same hack also targets Samsung and possibly others.
.unused.your-class-name {
/* Replace this comment with your styles */
}
Notes 8 will strip the unrecognised class and render the code behind it.
#mail-content-wrapper .class-name {
/* Replace this comment with your styles */
}
or
#mail-content-container .class-name {
/* Replace this comment with your styles */
}
#ReadMailMainWrapper .your-class-name {
/* Replace this comment with your styles */
}
.your-class-name[class^="ox-"] {
/* Replace this comment with your styles */
}
Open-Xchange powers a number of different email clients including Comcast, Libero, 1&1 MailXchange, Network Solutions Secure Mail, Namecheap Email Hosting, Mailbox.org, 123-reg Email, acens Correo Professional, Home.pl Cloud Email Xchange, Virgin Media Mail, and Ziggo Mail.
They prefix class and ID names with ox- so we can target them with this.
meta ~ * .your-class-name {
/* Replace this comment with your styles */
}
or
title ~ * .your-class-name {
/* Replace this comment with your styles */
}
The head and body structure of the email is removed, making content in the head siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.
<!--[if mso | ie]>
Target Outlook Windows
<![endif]-->
<!--[if true]>
Target Outlook Windows
<![endif]-->
<!--[if false]>
Hide from all Outlook Windows
<![endif]-->
<!--[if !mso]><!-->
Hide from all Outlook Windows
<!--<![endif]-->
This will also hide content from t-online.de - see below for fix.
<!--[if !mso]><! -->
Only Hide from Outlook Windows
<!-- <![endif]-->
** Note the space after the ! above ^ **
If no space is used the comment will hide the content from t-online.de
<span style="mso-element:field-begin;"></span>
Content to hide from Outlook
<span style="mso-element:field-end;"></span>
<!--[if mso 12 | mso 14 | mso 15 ]>
Target Outlook 2007/10/13
<![endif]-->
<!--[if mso 12]>
Target Outlook 2007
<![endif]-->
<!--[if mso 14]>
Target Outlook 2010
<![endif]-->
<!--[if mso 15]>
Target Outlook 2013
<![endif]-->
<!--[if mso 16]>
Outlook 2016 and up
Also Windows mail
<![endif]-->
Using the above comment and the different elements we can target specific Outlooks.
Operators:
gt = Greater than
gte = Greater than or Equal to
lt = Less than
lte = Less than or Equal to
Version Numbers:
Outlook 2000: Version 9
Outlook 2002: Version 10
Outlook 2003: Version 11
Outlook 2007: Version 12
Outlook 2010: Version 14
Outlook 2013: Version 15
Outlook 2016/19/21: Version 16 (I know not helpful!)
@media (min-resolution: 1dpi) {
body[data-outlook-cycle] .your-class-name {
display: block!important;
}
}
[data-ogsc] .your-class-name {
/* Replace this comment with your styles */
}
When changing a color style in dark mode, Outlook will add data-ogsc to the element. When changing a background-color style in dark mode, Outlook will add data-ogsb to the element.
This requires adding styles that Outlook will change to a wrapping element.
[data-outlook-cycle*="INSERT_STYLES"] .your-class-name {
/* Replace this comment with your styles */
}
Where it says "INSERT_STYLES" you need to keep that text as it is and not actually insert your styles.
This will target only non-Microsoft email addresses (@hotmail, @live, @outlook, etc).
.your-class-name\0{
/* Replace this comment with your styles */
}
The \0 gets removed as part of the HTML cleanup. Be aware that Gmail will remove a style block with this code, so it needs to be included in a separate <style> block.
This can also be added directly to a style, like .your-class-name { background: red\0/; }.
body[data-outlook-cycle] .your-class-name {
/* Replace this comment with your styles */
}
This attribute is added to both iOS and Android apps. It also renders in webmail if you drop the body tag and just use the attribute.
.olm-fragment-custom .your-class-name {
/* Replace this comment with your styles */
}
This must be placed in a <style> block placed inside the <body> of the email. It won’t work if placed in the <head>.
#converted-body .your-class-name {
/* Replace this comment with your styles */
}
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root body:not(.Singleton) .your-class-name {
/* Replace this comment with your styles */
}
The stuff before body will target WebKit desktop apps on Mac (Apple Mail and Outlook Mac), then we add :not(.Singleton) to remove Apple Mail.
This also targets Spark desktop app and iOS AppleMail.
Note that this will not work for non-Outlook accounts.
@media (display-mode: standalone) {
[class~=""x_your-class-name""] {
/* Replace this comment with your styles */
}
}
Outlook PWA supports the same targeting as Outlook.com and Outlook apps. However, its display-mode is set to standalone so we can target it with the display-mode media query.
.your-class-name.x_chained-class-name {
/* Styles for outlook webmail only */
}
.your-class-name.chained-class-name {
/* Styles for everyone else */
}
<div class="your-class-name chained-class-name">
<!-- Your code -->
</div>
Outlook webmail (desktop and mobile) prefixes all class names with x_. It does this in the class attribute of html elements as well as class definitions in <style> blocks. However, in the <style> blocks it does it only on the first class name of chained classes: .your-class-name.x_chained-class-name will be changed to .x_your-class-name.x_chained-class-name. On the element <div class="your-class-name chained-class-name"> will be changed to <div class="x_your-class-name x_chained-class-name"> by Outlook webmails pre processor.
This approach allows us to build a exclusive targeting which is helpful to tackle the box-sizing:border-box !important; style attribute which Outlook webmail adds on elements having widht / height AND paddings defined as we can set the width / heigth for border-box calculation for Outlook webmail only.
[class~="x_your-class-name"] {
/* Replace this comment with your styles */
}
Outlook.com prefixes class names with x_ but doesn’t do this on attribute selectors. So <div class="your-class-name"> can be targeted with [class="x_your-class-name"] and it’ll only apply to Outlook.
[owa].your-class-name x:default .your-class-name {
/* Replace this comment with your styles */
}
.moz-text-html .your-class-name {
/* Replace this comment with your styles */
}
This also targets Thunderbird.
#proton-root .your-class-name {
/* Replace this comment with your styles */
}
#mailcontent .your-class-name {
/* Replace this comment with your styles */
}
.mailcontent also works as well as combining both #mailcontent.mailcontent.
This has only been tested in Android so far but may work on other platforms. Please let us now if you are able to test it.
# #MessageViewBody .your-class-name {
/* Replace this comment with your styles */
}
& #MessageViewBody .your-class-name {
/* Replace this comment with your styles */
}
#secdiv .your-class-name {
/* Replace this comment with your styles */
}
meta ~ * .your-class-name {
/* Replace this comment with your styles */
}
or
title ~ * .your-class-name {
/* Replace this comment with your styles */
}
#MessageViewBody .your-class-name {
/* Replace this comment with your styles */
}
.body > div > div > .wrapper .your-class-name {
/* Replace this comment with your styles */
}
Samsung inserts a couple of divs between the body and the wrapper. Same hack as Nine.
body[style="overflow-y:hidden;width:auto !important; font-family: sans-serif"] .your-class-name {
/* Replace this comment with your styles */
}
Email is opened in an iframe and these styles are added to the body.
.-wm-your-class-name {
/* Replace this comment with your styles */
}
blockquote[data-color] + .your-class-name {
/* Replace this comment with your styles */
}
By adding blockquote before the targetted class, we can hook into the appended data-color attribute to access it.
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) {
/* Replace this comment with your styles */
}
Same target as Outlook for macOS and will also target iOS AppleMail.
.c17637 .your-class-name {
/* Replace this comment with your styles */
}
The class name c17637 is automated and not human-readable, which may mean it’s more likely to change in the future. Use this with caution.
.ShadowHTML .your-class-name {
/* Replace this comment with your styles */
}
The class name ShadowHTML is added by superhuman email client. They also add a number of other classes such as ShadowBody, ShadowWrapper. One that might be interesting if you ever need to only target mac is they add a class of Platform-mac.
<!--[if tonline]> T-Online <![endif]-->
<!--[if false]> T-Online <![endif]-->
<!--[if !true]> T-Online <![endif]-->
Supports any conditional comment.
@media screen and (-moz-device-pixel-ratio) {
.your-class-name {
/* Replace this comment with your styles */
}
}
meta ~ * .your-class-name {
/* Replace this comment with your styles */
}
or
title ~ * .your-class-name {
/* Replace this comment with your styles */
}
The head and body structure of the email is removed, making content in the head siblings of that in the body, so we can target with this. Applies to Thunderbird, Freenet (title element only), Orange.fr, and Samsung.
.moz-text-html .your-class-name {
/* Replace this comment with your styles */
}
This class is placed on a div inserted between the body and the wrapper so you can also do something like body > div > .wrapper .your-class-name.
_:-ms-input-placeholder, :root .your-class-name {
/* Replace this comment with your styles */
}
_:-ms-fullscreen, :root .your-class-name {
/* Replace this comment with your styles */
}
.your-class-name {
background:/* red */;
font-size: /* 50px */;
color: /* white */;
}
Yahoo and AOL will remove comment markers inside a style and render the content left behind.
.& .your-class-name {
/* Replace this comment with your styles */
}
Yahoo and AOL will replace the .& with their wrapping ID name. It can also be used to target element selectors (like .&h1{
/* Replace this comment with your styles */
}) and the wrapping div itself (with .&{
/* Replace this comment with your styles */
}).
@media screen yahoo{
.your-class-name {
/* Replace this comment with your styles */
}
}
Yahoo & AOL remove invalid media query selectors so will render the above as @media screen { }. Yahoo doesn’t support max-device-width which makes it tricky to split mobile but we can use max-width.
Be sure to keep the space between yahoo and {. If you use it without a space (yahoo{) then it may also render some of the code in Outlook.com.
id="★your-id-name"
AOL will strip this out but Yahoo will leave it. AOL also strips <title> and empty <style> elements.
.your-class-name {
background: red !yahoo
}
Add !yahoo after a style. (This could be any word.)
This will also render on some older versions of Notes.
<noscript>
<style>
.& .your-class-name {
/* Replace this comment with your styles */
}
</style>
</noscript>
Although it’s run as a separate company, the same targeting works for Yahoo Japan and Yahoo.com. However, Yahoo Japan displays the email in a sandboxed iframe and we can separate it with a noscript tag that Yahoo.com will ignore.
Need help? Can't find what you’re looking for?
Start a discussion on the GitHub repo or ask the #email-code channel on Email Geeks Slack.