How can I create a Sphinx directive that returns any kind of content with a specific class in HTML, and returns nothing in LaTeX?

Question

I want to create a directive that returns any kind of content in HTML with a class="hidden-content". But when it builds into LaTeX, I want it to return nothing at all.

For example:

.. hidden ::

   This content should not be visible in LaTeX and should have a specific class in HTML. 

   .. figure :: images/hidden.png
      
      This image should be hidden in PDF and displayed differently in HTML. 

   .. table :: This table should be hidden in PDF as well.

   +------------------------+------------+----------+----------+
   | Header row, column 1   | Header 2   | Header 3 | Header 4 |
   | (header rows optional) |            |          |          |
   +========================+============+==========+==========+
   | body row 1, column 1   | column 2   | column 3 | column 4 |
   +------------------------+------------+----------+----------+
   | body row 2             | ...        | ...      |          |
   +------------------------+------------+----------+----------+

In HTML, all content should be visible, but hidden content needs to be clearly marked so people know it shuold be hidden. In PDF, the content should not be displayed.

To add some context, this is because the HTML will be hosted internally and the hidden content should be visible, but people viewing it should know that they should be hidden when shared externally. The PDFs that we make from LaTeX will be shared externally, so the hidden content should not be produced at all.

To be honest, I am a little stumped at the start as it is pretty intimidating to appraoch a directive that can handle all these other kinds of nested directives. I can make roles that apply styles to text spans, but that does not work for more complex content blocks. I am open to other ideas besides building custom directives that are able to achieve the same goals as well.