Rules with * in CSS selector do not work

[Alex-302]

@adguard-bot commented on Sat Jun 10 2023

Issue URL (Ads)

https://ohnotheydidnt.livejournal.com/126148860.html

Comment

Username: @a-tinsmith

The following user filter does not work: livejournal.com##DIV[class*="threeposts"]

Screenshots

Screenshot 1


System configuration

Information	value
AdGuard product:	AdGuard Content Blocker v2.7.0
Browser:	Samsung Browser
Filters:	Ad Blocking: AdGuard Base, AdGuard Mobile Ads Privacy: AdGuard Tracking Protection Social Widgets: AdGuard Social Media Annoyances: AdGuard Annoyances Language-specific: AdGuard Russian

---

@Alex-302 commented on Tue Jun 13 2023

I don't see this element on the mobile version. Please try livejournal.com##.similar-posts

---

@a-tinsmith commented on Tue Jun 13 2023

I tried the filter you recommended, but the section is still there.

Screenshot_20230613_192856Samsung Internet

---

@Alex-302 commented on Tue Jun 13 2023

Just check element's code using dev tools. Samsung Browser can be debugged using Chrome dev tools by a cable.

---

@Alex-302 commented on Tue Jun 13 2023

On desktop, mobile version may have a different code on some sites.

---

@a-tinsmith commented on Wed Jun 14 2023

I solved it with the following filter: livejournal.com##.threeposts.

However, I think there is a bug and it should be fixed.

The desktop browser extension works perfectly with the wildcard class filter. The mobile browser extension does not. You can reproduce it with any html that has space characters before the class name:

<div class=" abc abc1 abc2">
    <p>contents</p>
</div>

And the custom filter rule: example.com##DIV[class="*abc"]

---

@Alex-302 commented on Wed Jun 14 2023

And the custom filter rule: example.com##DIV[class="*abc"]

error in * position example.com##div[class*="abc"]

Could you please test on another site? I checked similar rules on our site, and they work. livejournal.com has anti-adblock scripts, which may prevents applietn element hiding rules.

---

@a-tinsmith commented on Thu Jun 15 2023

Yes, I made a typo in the rule. The * was in the wrong place.

You can try the following page: https://jsfiddle.net/g349e61m/ The rules I used:

jshell.net##DIV[class*="cde"]
jshell.net##DIV[class*="threeposts"]

These rules block the correct DIV element in the desktop AdGuard browser plugin. But I couldn't make it work in the mobile AdGuard Content Blocker plugin.

---

@Alex-302 commented on Thu Jun 15 2023

It seems Content Blocker in Samsung Browser can't apply rules to iframes, if the rule has domain of iframe (like AdGuard for iOS/Safari). Please try with adress of the site, where added iframe jsfiddle.net##DIV[class*="cde"]

But your rules will work with AdGuard for Android from adguard.com

---

@a-tinsmith commented on Fri Jun 16 2023

I had to use jsfiddle.net because I don't own a website host to experiment with different rules. I cannot create development environment for AdGuard Content Blocker to debug it. The problem with livejournal.com is very easy to reproduce:

1. Take any Android device and use Samsung Internet browser.
2. Install AdGuard Content Blocker from Google Play Store, then enable it.
3. Add this user rule: livejournal.com##DIV[class*="threeposts"]
4. Navigate to any page on the livejournal.com

Expected: The section "Related posts" should be hidden.

Actual: The section is visible.

Workaround: Use CSS selector: livejournal.com##.threeposts

You can close this bug if you believe the severity of the bug doesn't justify the effort to fix it. After all, it's your product, I cannot tell you what to do.