Targetting specific image into the CSS?

I would like to know how to target an image in my CSS to apply a style only to this image?

I just found a solution to target individual images in CSS. If you right click the image in the browser and inspect you will see something like: data-image-id="548969e9e4b05708750ebe59". This looks to be a persistent id that can be used to reference the image. So an example in CSS:

[data-image-id="548969e9e4b05708750ebe59"] {
   border-radius: 20px;
}

This will target that specific image. Perhaps you could tweak this for any block that you are wanting to modify. The key is finding the persistent id (the one without “yui”)

Did exactly as instructed but the image is not affected. Code below, image ID is correct.

[data-image-id="549a0608e4b0ecaa2d6e782a"]

{ border: 2px; color:black }

Any suggestions?

Hmm. I am no expert on Squarespace's system. My discovery is based completely on observation and what worked for me. So there are two things that might be going on:

1. Either the id that you have is incorrect.
2. Or, more likely, the change won't appear until you sign out. When I added the border radius to my image, the image was still square until I signed out. I don't know why. My guess is the data-image-id doesn't show up when you are signed in.

Does this help?

I recently needed to do the same thing, although it was a group of 3 images in the footer area of my site.

There are two (pretty easy) ways to do this that I found that involve using the "Filename (Optional)" field when you click edit on each individual image. You can essentially use this like a class name in CSS because Squarespace uses it for the "alt" attribute on the image in your code. You can easily target specific alt attributes. If you named your image "my-awesome-image.jpg" then you would be able to add the following code to your Custom CSS to target it:

[alt="my-awesome-image.jpg"] { border: 5px solid red; }

If you don't care about your site being semantically correct you can give several images the same "filename" in their editor and target them all at once with one line of CSS. If you used the filename "add-drop-shadow" then your custom CSS would be:

[alt="add-drop-shadow"] { box-shadow: 0px 0px 10px black; }

Something to note: You might need to add the !important tag to your css to make it take priority. Some themes may override your styles even if your target them correctly.

[alt="add-drop-shadow"] { box-shadow: 0px 0px 10px black!important; }

Thanks!!!!

thank you! this worked for me