Recently I had the need to hide elements on some web page, but only if they contain a certain other element: Hide all list items that have a div with class="premium".
I use Firefox with uBlock origin for advertisement blocking. Beside ad blocking, it also helps to keep sanity on the web by hiding unnecessary elements like the "hot network questions" list on Stack Overflow.
The normal filter rules used by uBlock are CSS selectors, which do not allow selecting elements based on child tags.
Fortunately, uBlock supports XPath filters which specifically have this feature. The resulting filter rule was easy to write:
##:xpath(//li[.//div[contains(@class,"premium")]])
heise+ filtering
2019
I use this to filter "heise plus" articles on the main heise.de page, since I do not have a login there and do not need teasers:
##:xpath(//article[.//span[contains(@class,"a-article-meta__item--heiseplus")]])
2023
The usage of Tailwind CSS makes it harder to block elements since we do not have meaningful class names anymore. Instead I have to rely on hard-coded element attributes.
##svg:xpath(.[@width=78 and @height=24]):upward(article)
e-reader-forum.de Anzeige
The owner of e-reader-forum.de put ads into their forum that look like normal posts. The first response to a new thread is
Hello $originalPosterName,
have a look here:
$originalThreadTitle
for example at thread Eigene Apps installieren (Firmware 14.2.0) it says (in German):
Hallo AaronDewes,
schau mal hier:
Eigene Apps installieren (Firmware 14.2.0).
The only way to know it's an ad is that the user name is "Anzeige", which is german for "Advertisement".
This is one of the most annoying ads I've seen in a long time, so I had to add a ublock rule that removes the posts that have "Anzeige" as username:
##:xpath(//article[contains(@class,"message--post") and .//span[contains(@class,"username") and text() = "Anzeige"]])
