Search code examples
htmlcssnetflix

Using Custom Style sheet for browser - How to hide specific shows on netflix?

I recently learnt that we can use custom style sheets to manipulate elements of websites on the internet.

I have a problem where in I end up killing a lot of time binge watching shows on netflix and then I later regret doing that. So I'd like to hide the shows I get addicted to - in this instance "Arrow".

I'm sure there will be another one in near future I get hooked on, and I'll use the same technique to hide it until I get over it.

The CSS from Netflix for Arrow is:

<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>

This is nested inside several divs and the outer most div could be different as the shows can be displayed multiple times under different sliders.

The immediate parent of this CSS selector I mentioned above is:

<div class="bob-overlay bob-overlay-hidden">
<div class="bob-play-hitzone"></div>
<a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
<div class="bob-overview-wrapper">
    <div class="bob-overview">
        <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
            <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
        </a>
        <div class="bob-title">
            Arrow
        </div>
        <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
            <span><b>S5:E7</b> "Vigilante"</span>
        </div>
    </div>
    <div class="bob-content-warning-wrapper"></div>
</div>

I tried adding the following in that Custom Style sheet but it didn't make any difference.

a[aria-label="Arrow"] { display: none; }

any advice on how to write css selector that will match and hide this show ?

Solution

  • It sounds like you might be looking to hide the whole bob-overlay container that contains the element with aria-label="Arrow". CSS can't select a parent from a child, but you can do that pretty easily with Javascript. Install a userscript manager like Tampermonkey, then search for elements matching a[aria-label="Arrow"], find their ancestor .bob-overlays, and remove them (or set their display to none):

    for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}
    <div class="bob-overlay bob-overlay-hidden">
  arrow - hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Arrow" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        Arrow
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

<div class="bob-overlay bob-overlay-hidden">
  not arrow, don't hide me
  <div class="bob-play-hitzone"></div>
  <a aria-label="Foobar" class="bob-jaw-hitzone" href="/title/70242081"></a>
  <div class="bob-overview-wrapper">
    <div class="bob-overview">
      <a tabindex="0" data-uia="play-button" role="link" aria-label="Resume" class="bob-play-button playLink" href="/watch/80140962?trackId=14170286&amp;tctx=1%2C0%2Cb9a98838-f436-4b89-ac66-7190b45402e6-32766795%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_77601417X3XX1581889779290%2Ccf1e7866-0b59-41c4-96bd-b10d5ca4cf61_ROOT">
        <span class="play-button">
                <svg class="svg-icon svg-icon-play-with-ring" focusable="true">
                    <use filter="" xlink:href="#play-with-ring">
                    </use>
                </svg>
            </span>
      </a>
      <div class="bob-title">
        something else
      </div>
      <div class="bob-overview-resume-title-wrapper">
        <div class="watched-title watched-title--bob-overview watched-title--no-wrap">
          <span><b>S5:E7</b> "Vigilante"</span>
        </div>
      </div>
      <div class="bob-content-warning-wrapper"></div>
    </div>
  </div>
</div>

    If the elements are loaded dynamically and not present on initial pageload, you might have to run the JS after a setTimeout or (or setInterval polling, or MutationObserver).

    The whole userscript will probably look something like

    // ==UserScript==
// @name             Hide Arrow
// @include          https://www.netflix.com/*
// @grant            none
// ==/UserScript==

for (const a of document.querySelectorAll('a[aria-label="Arrow"]')) {
  a.closest('.bob-overlay').remove();
}