ARTICLE AD BOX
Issue
I am working on a uBlock Origin filter, (ie: a CSS selector), for a webpage containing .post elements separated by <hr> tags. For example:
<div class="post" data-source="sponsored"></div> <hr> <div class="post" data-source="user"></div> <hr> <div class="post" data-source="sponsored"></div> <hr> <div class="post" data-source="user"></div> <hr> <div class="post" data-source="sponsored"></div>I want to create a filter to hide all posts where data-source="sponsored" and remove exactly one adjacent <hr> element either before or after the post. The goal is to filter posts without leaving any extra <hr> borders. For example:
<div class="post" data-source="user"> <hr> <div class="post" data-source="user">Attempted solutions
I've tried a few different CSS selectors, but each had issues.
If I only hide the .post, I end up with extra borders. example.com##.post[data-source="sponsored"] <hr> <div class="post" data-source="user"> <hr> <hr> <div class="post" data-source="user"> <hr> If I hide the .post and the following <hr>, it leaves an extra border if the last post gets filtered. example.com##.post[data-source="sponsored"] example.com##.post[data-source="sponsored"] + hr <div class="post" data-source="user"> <hr> <div class="post" data-source="user"> <hr> If I hide the .post, the following <hr>, and the prior <hr>, I can end up with no border between two valid posts. example.com##hr:has(+ .post[data-source="sponsored"]) example.com##.post[data-source="sponsored"] example.com##.post[data-source="sponsored"] + hr <div class="post" data-source="user"> <div class="post" data-source="user">Question
How can I make a uBlock Origin filter (or filters) that hides both a matching .post element and exactly one adjacent <hr> element?
