-1

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

Nicholas Kunze
  • 53
  • 6

2 Answers2

0

From my understanding of the Fluid app, Userstyles still uses the normal CSS language. Which means to hide the element you want, it should be as simple as:

#rhf-container .rhf-border {
    display: none;
}

If you have no success there, I would also try:

#rhf-container .rhf-border {
    display: none !important;
}

Using !important pushes your new display settings above any css regarding the display setting before it and on the same element.

If you still don't have any luck, make sure the elements are definitly correctly named in your HTML and your CSS. You should check that you have an element with an id equal to rhf-container, with a child inside it with a class equal to rhf-border

EDIT:

As your question has changed (in the reply to this answer), I'll add this as an edit. To just hide the whole rhf-container, you just need to do this:

#rhf-container {
    display: none;
}

I'd strongly recommend reading through some CSS documenation too when you get chance, it's actually really fun once you get stuck on in.

A Friend
  • 1,420
  • 17
  • 22
  • No luck. What if I want the **entirety** of `rhf-container` (a div id which definitely exists) to be not loaded. – Nicholas Kunze Nov 22 '19 at 23:35
  • Furthermore is the `#` at the start required? I've looked at other user styles at they have and `@` at the front for example `@font-face`? (please excuse my ignorance, I'm learning) – Nicholas Kunze Nov 22 '19 at 23:36
  • `id="rhf-container"` and `class="rhf-border"` definitely exist – Nicholas Kunze Nov 22 '19 at 23:39
  • @NicholasKunze Okay, I've added the extra code to my answer which should just hide the whole `rhf-container`. No, don't worry at all! We're here to help after all :). Well to explain this shortly and simply, hashtags are used when you're looking for an element by it's `id`, a period/full-stop is used when looking for an element by it's `class`, and the `@` symbol is used when you need to give special instructions for the browser, for example, `@font-face` imports a font and `@media` starts a media query – A Friend Nov 22 '19 at 23:42
  • @NicholasKunze If you could comment with the link to your website/page of your application where you are experiencing this issue, it might be a bit easier for us to help. If you can't do that, maybe send over a screenshot of HTML code you're using to create the elements? – A Friend Nov 22 '19 at 23:44
  • I've added a screenshot (https://i.stack.imgur.com/SN4Mg.png) – Nicholas Kunze Nov 23 '19 at 00:14
  • @NicholasKunze ah in that case, my new editted code will work like I suspected. I know you've marked Franklin's answer as the correct one but his code teaches you some bad practices. `div#rhf-container` shouldn't be used, my code works the same way but is more universal, less characters of code and achieves the exact same thing :) – A Friend Nov 23 '19 at 00:21
  • Hmm.. your edited code did not work. For some reason it wants `div#rhf-container {` – Nicholas Kunze Nov 23 '19 at 00:25
  • @NicholasKunze Ah I think I know why, it's a dependantcy issue like I mentioned before. There must be another mention in your CSS which refers to just `#rhf-container` and when you use `div#rhf-container` it adds an extra degree of specificity which means it will prioritise it over the previous declaration. The same way that adding `!important` would've also worked. Fair enough I guess, Franklin got extremely lucky there. – A Friend Nov 23 '19 at 00:29
-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

Franklin'j Gil'z
  • 377
  • 1
  • 8