Advanced css issues. need to hide a div, but only if one of its children has a specific word.

New to this forum so apologies if this is the wrong thread but i need a bit of help here.

Im not new to using or editing css or even programming far from it for that matter, but my problem has me stumped
im using stylish on Chrome, I usually use stylebot but its lack of wildcards is a pain.

What i am trying to achieve is the following,

I am trying to hide a div element but one of its child elements must contain a specific word, the issue here is that word is normally between 10 and 20 sub elements deep.

Im not that familiar with the stylish syntax yet.

I've attached a screen shot so its a little more understandable,

On facebook, they have sponsored web sites which I hate as im totally against adverts using my bandwidth.

I used to block all adverts but their programmers have since changed the way their adverts are loaded.

the start of every facebook post is now with a div containing an id tag with "hyperfeed_story_id" + a random key, this is pretty easy to search for. The sneeky programmers now use the same start for adverts as well as normal stories,
however deep within the advert html is the word sponsored.

I am trying to find a way to get the original div but only if its children contain that word.
searching for the hypers is easy using wild cards.

div[id^='hyperfeed'] {
display: none;
}

The down side of the above is EVERYthing is hidden.

but what i need is for this to return the hyper only if there is a child containing the word sponsored.

Can this be done easily or will i have to use scripting?

I have a screen shot of the html layout for a sponsored item.

At the bottom of the screen shot is the sponsored word within an A tag,
at the top is the original div i need with the hyperfeed_story_.

One other issue as every time the page is refreshed, Every single ID changes, so I cant just hide specific id's

Any ideas

Many thanks

Mac.


Comments

  • edited November 2017 Chrome
    The only adblocking which saves any significant bandwidth is actually blocking the adservers from loading as third-parties. In this case, Facebook is providing the actual content and the "sponsored content", so you can't save bandwidth.

    Without any proper unique selectors, Stylish, and CSS in general are pretty useless. You'll need javascript. Hiding parent elements based on text content of a child can be fairly simple with a line of jQuery, which you can easily google. Scripts which hide elements seamlessly on page load get more intricate. Scripts which account for dynamically added content (not initially loaded with the page) get more complicated.

    Ublock has this type of functionality built in via Procedural cosmetic filters. I think ABP and others support similar selectors, but I doubt they're quite as sophisticated. Their implementation isn't exactly seamless, but neither is a lot of their element hiding. ABP relies more on javascript, so maybe they apply quicker, if they actually support such filters.


    Either way, test them out and see if they work well enough for what you're looking to accomplish.

    As an example, if I wanted to hide the header block in this thread, based on the text content of the title h1, I'd chain those selectors like this:

    forum.userstyles.org##.PageTitle:if(h1:has-text(Advanced css issues.))

    (first 3 words of the title).
  • Cheers it did exactly what it said on the tin.

    Mac
  • Ublock has this type of functionality built in via Procedural cosmetic filters.

    Great! I didn't know this.
    Now I can hide elements with a syntax that Stylish and Stylus doesn't support.
    Thank you.
Sign In or Register to comment.