I have nothing against short-form video content. TikTok is a lot of fun! YouTube shorts are... not it. I hate having them show up in my subscriptions feed! Today I figured out how to remove them from the feed with one line of CSS.
I wanted to set display: none
on all items in the feed that had a child element that signified it was Short. Previously I'd have to go to JavaScript to do this sort of thing, but now we have the :has() selector I can do it with CSS. This means we can use a CSS-injecting extension like User CSS or Stylebot.
I'm using Arc as my browser, which has a CSS injection feature built-in via Style Boosts.
Here's the CSS to add to your extension (or Boost if you're using Arc ) to hide all the Shorts:
Update: Jon Campbell pointed out the snippet I had here doesn't work on grid view of the subscriptions page, only the list view. I've updated it so shorts are hidden on both views. To get a snippet that hid the correct things on list view without breaking grid view needed a combination of :not()
and :has()
. I've definitely learned some things about :has()
during this process!
/* Grid View */
#items.ytd-grid-renderer>ytd-grid-video-renderer:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
display: none;
}
/* List View */
ytd-item-section-renderer:not(:has(ytd-grid-renderer)):has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]) {
display: none;
}
Hooray for the patchability of the Web!
Top comments (1)
i like Youtube shorts