MacOS only issue hiding HTML email for Office 365 / Outlook 2016

I'm successfully hiding target content on Outlook.com, Office 365 for Windows, and Outlook 2016 for Windows with the following code:

<style>
  [id="x_hide-outlook"]{
    display:none !important;
  }
</style>

<!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
      #hide-outlook {
        display: none;
      }
    </style>
<![endif]-->

<div id="hide-outlook"><h1>HIDDEN IN OUTLOOK/OFFICE 365</h1></div>

The above code doesn't work to hide email content for macOS versions of Office 365 and Outlook 2016 specifically (works on Windows versions).

Has anyone run into a macOS specific issue with the above logic / any solutions?

Solution

macOS Outlook renders emails differently, however, there is another way to target it. Thanks to Mark Robbins' work I was able to hide it for you via this code:

<head>
    <style>
  [id="x_hide-outlook"]{
    display:none !important;
  }
    _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) #hide-outlook {
    display:none !important;
}
</style>

<!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
      #hide-outlook {
        display: none;
      }
    </style>
<![endif]-->
</head>
<body class="body">
<div id="hide-outlook"><h1>HIDDEN IN OUTLOOK/OFFICE 365</h1></div>
    
</body>

Note the class="body" on the <body> tag - this is necessary.

See Litmus sample results here: https://litmus.com/checklist/emails/public/faeec7e