Deprecated HTML Image Elements

Hi there! I had a few questions regarding the Trainer Profile pages, and their HTML code, and the "Site Skins" Extra CSS feature. I was working on the CSS code for a Christmas Gift to a friend of mine- I was going to replace the image on the "suit" data layer of their Trainer Avatar with an image that is more like their sona- So they have a bit more of a personal Trainer Avatar, but I've come across a few issues;

1. The #trainer_full_image element on the page is divided into 6 layers: "base", "hair-back", "face", "suit", "mega", and "hair-front". Easy enough, I can target the "suit" layer using a CSS query; "image[data-layer="suit"]"! The issue here is that, by only using this query, that it will inevitably target EVERY Trainer's "suit" layer image. What I want is to target my friend's Trainer avatar specifically, which brings us to issue #2:
2. I cannot seem to target the xlink:href value of the image element I'm trying to target. Whether I am entering it alone (ex: image[xlink:href="https://pfq-static.com/img/outfits/suit/sweater/n/purple.png/t=##########") or with the data-layer tag as well (ex: image[data-layer="suit", xlink:href="https://....."] ). I've even tried to use substring matching instead (ex: image[xlink:href*"purple.png"]) and still no dice.

This lead me to do some investigating, and I noticed that the "xlink:href" value is apparently deprecated in HTML, and is no longer suggested to be used? Which has me believing that this may be the issue. If anyone has any other possible issues I may be overlooking, I'd appreciate it!!

Just worth noting that the `xlink:href` you see is not HTML, it is SVG. You won't be able to "change" SVG as easily as you can other things...

Ok- With that in mind, is there any way to target the element with that kind of value? I may not be able to change it, but I am still curious about how to specify it.

I believe the CSS selector is [xlink|href] using the pipe character as a separator because the colon has other meanings in CSS. But I'm not sure how you might go about it from there, sorry!

Hm, that doesn't seem to have worked, either- I guess it's just something that can't be selected, due to having that colon in it. Thanks for the help, anyways!

You might be able to layer something over the avatar, like a paper doll I guess? I'm not sure how you'd target just your friend's profile tho, vs everyone on site. There's just not a lot of good selectors I can think of, especially on the single profile page where you don't even have the linked name to work with. A few people have asked about similar specific-user codes before. It would be pretty easy if #profilepage had a data-user attribute like #core does, but idk if that's something Niet would consider adding.

If you're just using it for yourself and don't need widespread browser support (well, mostly widespread but Firefox needs it to be allowed in settings), you can use the pseudo-class to target a specific user's details by targeting the field link in the profile page. For example, the following targets only my character's glasses and deletes them: Of course, you're very limited in what you can actually do to SVG elements... They're not like elements which can be modified with the attribute.

Maybe it could be possible to set the display of the layer I'm trying to remove to "none" like here, and make a ::before element in its stead, that has a background-image? I'll have to try that later, I'm a bit busy at the moment, but I wanted to just get my thoughts down here before I dip out- Thanks for the suggestion, though! I'll try it soon!