Target Outlook.com using the [owa] Element

You can target Outlook.com by using a CSS element called [owa] (Outlook Web Access), which is part of Outlook.com

How does it work? Outlook.com prefixes all styles with their own. This means by placing the [owa] element before each class or id within your CSS, these will only be affected in Outlook.com, all other webmail services, and email clients will ignore them.

To give it a go, simply place the following CSS within the of your email.

CSS


  <style type="text/css">
    [owa] .htmlemailcheck {
      color: #26d0ae;
    }
  </style>

Now you can place the following span tag where you want the contents to be shown in Outlook.com, that’s it!

HTML


  <span class="htmlemailcheck">
    This span will only be visible in Outlook.com
  </span>

5 Comments

  • Andrés says:

    Hi, Could it be possible that outlook.com can no longer be accessed targeting with this hack?

    • David Bedenknecht says:

      Hi Andrés,

      Thank you for your comment!

      I can confirm that this hack is still working in outlook.com

      Following the above example, you should notice that the text within the span is turned green in outlook.com wherein all other webmail services and email clients the color does not change.

      Kind Regards,

      David

  • Derris says:

    Try the below code.

    span[class~=x_htmlemailcheck]{
    color:#26d0ae;
    }

    this span will only be visible in outlook.com

    • Christopher says:

      Thank you! The [owa] didn’t work for me, but this method works perfectly.

  • Steve says:

    Any way we can use this to target outlook.com dark mode?

Leave a Reply

Your email address will not be published. Required fields are marked *