I know the CSS selector I want to hide - how do I set a "UserStyle" to "display:none" it?

Question

So I use something called 1Blocker on Mac & iOS. I've found it to be extremely useful. On the Mac app it helpfully tells you the rules that you have created in the iOS app.

The web page now looks perfect on Safari on all my devices.

But I also use Fluid app, a site specific browser. 1Blocker does not affect this.

It has the facility to do UserScripts and UserStyles.

My objective is to hide the following CSS selector #rhf-container .rhf-border

What do I write in UserStyles to achieve this?

My attempt is here:

[div id="rhf-container"] {
display: none;
}

Screenshot of Code

this is the screenshot of the page as requested

Answer 1

You can try

div[id="rhf-container"] {
  display: none;
}

/* or */

div#rhf-container {
  display: none;
}

div[id="rhf-container"][class="rhf-border"] {
  display: none;
}

/* or */
div#rhf-container.rhf-border {
  display: none;
}

if not work, that's not right element