Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to the Power Users community on Codidact!

Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.

Post History

71%
+3 −0
Q&A How can I get my browser to block a specific SVG (Discord server icon)?

You don't show enough of the document structure in the question to provide a fully fleshed-out example, but since it appears that you're now able to block based on CSS selectors and simply need hel...

posted 2y ago by Canina‭

Answer
#1: Initial revision by user avatar Canina‭ · 2021-12-15T21:26:36Z (over 2 years ago)
You don't show enough of the document structure in the question to provide a fully fleshed-out example, but since it appears that you're now able to block based on CSS selectors and simply need help figuring out what CSS selector you should use...

CSS supports both attribute substring matching and positional pseudo-classes, which can help you out here. For example, if I'm not mistaken, you could use a CSS selector along the lines of

    div[aria-label="Servers"]:nth-child(4) div[class^="listItem"] div div svg { }

which would find a `div` with an `aria-label` attribute value of `Servers`, locate the fourth child element of that, then go three `div` elements deep (the first of which must have a `class` attribute with a value that begins with `listItem`), then apply the specified style to the `svg` element therein.

You blacked out the value for `class` for the `div` `listItem` class names; it's possible that those could provide something more reasonable to match on, in which case you might instead try something like

    div[aria-label="Servers"] div.listItem-12345 div div svg { }

It's also possible that the `data-dnd-name` property might be useful for matching, in which case you can try as a starting point

    div[aria-label="Servers"] div div div[data-dnd-name="..."] svg { }

or to match something at the beginning of the property value, again

    div[aria-label="Servers"] div div div[data-dnd-name^="some-"] svg { }

Complex CSS selectors can be a bit tricky to get right, and something like the above will likely be very heavily dependent on the exact document structure, but they are also extremely powerful when you need to match something that you can't readily match directly (such as something that doesn't have an appropriate `id` or `class` attribute to match on). [Here's a fairly readable overview](https://learn.shayhowe.com/advanced-html-css/complex-selectors/) of some of the more complex CSS selector mechanisms available; the *Attribute Selectors* (currently about a third of the way down from the top of the page) and *Structural & Position Pseudo-classes* (about half way down) sections are likely to be particularly useful in your scenario.