Targeting Specific Email Clients

How to make specific custom classes for specific email clients.

by Wally Glenn

HTML

<p>
In the CSS section I have laid out the classname mofifiers and @media queries to allow you to target specific versions of an email client.
</p>

<p>
For a specific list of email clients that have @media query support, visit: https://litmus.com/help/email-clients/media-query-support/
</p>

<p>
Outlook conditionals be used in the head or the body of the email.
</p>

CSS

<style>
	/* AOL: */
	div[class~="aolmail_classname"]{/*your code */}
	/* <div class="classname">TEST</div> */
	
	/* Apple, IOS, Webkit: */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.classname {/*your code */}
	}

	/* Outlook IOS & Android: */
	body[data-outlook-cycle] .classname {/*your code */}

	/* Outlook for Android: */
	@media (min-resolution: 1dpi) { 
		body[data-outlook-cycle] .classname {/*your code */}
	}

	/* @hotmail, @live, @outlook in Outlook IOS */
	[data-outlook-cycle*="INSERT_STYLES"] .classname {/*your code */}

	/* Gmail: */
	  u ~ div .classname {/*your code */}

	/* Yahoo: */
	@media screen yahoo{
		.classname {/*your code */}
	}
	
	/* Yahoo IOS: */
	@media screen yahoo and (max-width:480px){
		.classname {/*your code */}
	 }
 
	/* Outlook: */
	<!--[if mso]>/* targets all versions of Outlook */<![endif]-->
	<!--[if !mso]><!-->/* Targets everything but Outlook*/<!--<![endif]-->
	<!--[if (gte mso 9)|(IE)]>/*targets Outlook 2000 - Outlook 2019*/<![endif]-->
	<!--[if mso 9]>/*targets only Outlook 2000*/<![endif]-->
	<!--[if mso 10]>/*targets only Outlook 2002*/<![endif]-->
	<!--[if mso 11]>/*targets only Outlook 2003*/<![endif]-->
	<!--[if mso 12]>/*targets only Outlook 2007*/<![endif]-->
	<!--[if mso 14]>/*targets only Outlook 2010*/<![endif]-->
	<!--[if mso 15]>/*targets only Outlook 2013*/<![endif]-->
	<!--[if mso 16]>/*targets only Outlook 2016*/ <![endif]-->
 </style>