Selector

A selector rule allows you to block specific parts of a web page by matching an element’s CSS selector to a block rule in Plucky.

This method of blocking differs from the standard Plucky usage of blocking web pages entirely. There are some situations where a site may be needed or desired, but the site has unwanted functionality which makes self-control difficult. Consider needing YouTube to do school work, but finding the recommended videos feed on the homepage and watch pages too tempting or distracting to work efficiently. It could be an option to only allow image and video on specific pages, or it might be better suited to your needs to simply filter out the distractions.

Example: how to block distracting parts of YouTube

pluck + block youtube.com selector ytd-rich-grid-renderer   # homepage video feed
pluck + block youtube.com selector ytd-miniplayer           # miniplayer
pluck + block youtube.com selector "#related"               # related videos sidebar
pluck + block youtube.com selector ytd-masthead "#center"   # search bar
pluck + block youtube.com selector ytd-masthead             # entire top bar incl. search
pluck + block youtube.com selector tp-yt-app-drawer         # left side navigation menu
pluck + block youtube.com selector ytd-mini-guide-renderer  # left side menu mini mode
pluck + block youtube.com selector ytd-comments             # comments section

Adding one or more of the above rules to your Plucky config will filter out the unwanted functionality. One Plucky user, after trying the above rules, said that “Youtube looks a lot better without all the extra stuff."

Scheduling selector rules

Like most Plucky rules, selector rules can be scheduled using the when modifier.

pluck + when 9-17 block youtube.com selector ytd-rich-grid-renderer
pluck + when 9-17 block youtube.com selector "#related"

Only block YouTube’s video recommendations during work hours.

Creating your own selector rules

As you’ve seen in the examples above, a typical selector rule will follow this format:

pluck + block sitename.com selector "#id"
pluck + block sitename.com selector .class
pluck + block sitename.com selector div_name

First, you start off specifying you want to add a block rule, then you specify the host or URL the block rule will work on, and finally you tell Plucky it’s a selector rule followed by the specific pattern the page or site uses to select the element you want to block.

That last part is what can make this a challenge for many users. If you are unfamiliar with web design, you probably have no idea what CSS selectors are, or how you would find the pattern for the functonality you want to block.

If you are a beginner and find it all to be overwhelming, you can make a request on the forums in this topic here. If you politely direct Jake, or another user volunteering their help, to the site you want to create a rule for, and mention the specific functionality you want to block, you may get an answer with the rule you need. From there, you just need copy and paste it into a console.

If you are a power user and are up to the task, but you aren’t familiar with CSS or inspecting elements, try playing with this demonstrative tool on W3Schools. When you are ready to try it out on a specific site to create a block rule, press CTRL+SHIFT+C in a Chromium-based browser to open the Inspect Elements menu (your browser may also have this listed in the right-click context menu). In this menu, hovering over any part of the web page you are currently on will highlight the element and display the CSS selector for that element. From there, you can plug that into the rule format we looked at before and see if it works.

Unblocking on some web pages

A block rule for a selector can be undone with an unblock rule. For example, the following will hide the element with the id of “abc” on http://example.com/ but not on http://example.com/ok

pluck + block example.com selector "#abc"
pluck + unblock http://example.com/ok selector "#abc"

The importance of using the try tag on a new rule

Unlike a simple block rule which only blocks a host or URL, and it’s obvious whether you want that host or URL to be blocked, a selector rule isn’t always obvious about what it’s going to block once applied. If you think you’ve got the correct element, sometimes you’ll be right, sometimes you’ll be wrong, and sometimes you’ll be kind of right to devastating effect (like, say, blocking a parent element of nearly all content on the entire site). In order to avoid doing this on a site which you rely on for school or work, and then being unable to reverse the effect until after a delay cycle has passed, do yourself a favour and use the try tag.

pluck + try block sitename.com selector .class

You aren’t seemingly doing anything different from the examples above, but you add try immediately before the rule you intend to add to your config. The point of the try tag is to test things out. Plucky will still treat the rule as if you added it without a tag, but, if something breaks unexpectedly, the presence of the try tag lets you remove the rule instantly (no waiting for delay). If the rule works as you expected, add the rule again without try to make it permanent.