How to Target Email Clients

Proton Mail (Desktop)

Sun, 27 Apr 2025 00:00:00 +0000

#proton-root .your-class-name {
  /* Replace this comment with your styles */
}

Outlook (webmail)

Fri, 28 Mar 2025 00:00:00 +0000

.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.

Onet (Desktop)

Wed, 26 Mar 2025 00:00:00 +0000

#ReadMailMainWrapper .your-class-name {
  /* Replace this comment with your styles */
}

Notion mail (Mac, Webmail)

Sun, 16 Mar 2025 00:00:00 +0000

#mail-content-wrapper .class-name {
  /* Replace this comment with your styles */
}

#mail-content-container .class-name {
  /* Replace this comment with your styles */
}

Free.fr

Fri, 30 Aug 2024 00:00:00 +0000

.v1your-class-name {
  /* Replace this comment with your styles */
}

[class="v1your-class-name"] {
  /* Replace this comment with your styles */
}

Free.fr prepends v1 to class names

Mailspring

Wed, 24 Jul 2024 00:00:00 +0000

#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.

Samsung Email (with a non-microsoft account)

Wed, 17 Jul 2024 00:00:00 +0000

& #MessageViewBody .your-class-name {
  /* Replace this comment with your styles */
}

Samsung Email (with a microsoft account)

Wed, 17 Jul 2024 00:00:00 +0000

# #MessageViewBody .your-class-name {
  /* Replace this comment with your styles */
}

QQ mail (Android)

Wed, 07 Feb 2024 00:00:00 +0000

#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.

Outlook (Android, Mac)

Tue, 12 Dec 2023 00:00:00 +0000

#converted-body .your-class-name {
  /* Replace this comment with your styles */
}