Search code examples
cssfirefoxfirefox-addon

How to only show one part of a web page and hide everything else using CSS on client side Firefox?

I want to see only these two parts highlighted here

enter image description here

from this particular website tgju.org when I open it in Firefox (v.99).

I'm using This add-on from Magic CSS and tried this CSS code :

body :not(.info-bar) :not(.date){
  display: none;
}
.info-bar {
  display: block !important;
}
.date {
  display: block !important;
}

But it doesn't seem to be working just right. As you see the smaller section (which is date and time) is shown but the price bar (.info-bar) is hidden with the rest of page. How should I modify the code to only show those highlighted parts? Thanks

enter image description here

Solution 
  • body > :not(main):not(:nth-child(3)),
main > :not(.home-quickview-wrapper),
.home-quickview-wrapper > :not(.container),
#main-header > :not(.header-navbar),
.header-navbar > :first-child,
.nav-items > :not(.nav-time) {
    display: none !important;
}

    This should hide all the elements you don't want.

    The tools I used for this, are just the browser developer tools. I started by inspecting the elements you want to keep, to see where in the DOM structure they are sitting. Then I went up from there, and checked at which level siblings could be hidden immediately, and which one would need a bit more "drilling down into" again, to keep the necessary parts.