Remove Shorts from your YouTube Subscriptions feed with :has()

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!