## How to target specific img using css

Tags: html,css

### Problem :

All,

I know there have been some posts about this issue but the suggestions dont seem to work. What am I doing wrong here?

This is the snippet. The first part in my css that is not commented out will apply the opacity to my two images on hover.

When removing the first block and commenting in the second block, its suppose to target only the delta.jpg image and apply the opacity, leaving the shh.png image to be unaffected.

.wsite-image-border-none img:hover {
opacity: 0.5;
}

/*
.wsite-image-border-none img[src="image\delta.jpg"]:hover {
opacity: 0.5;
}
*/
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0">
<a><img src="image\shh.png" alt="Picture" style="width:293;max-width:100%"></a>
<a><img src="image\delta.jpg" alt="Picture" style="width:293; max-width:100%"></a>
<div style="display:block;font-size:90%"></div>
</div>

I am trying to do this on my weebly site where I don't have 100% control over the HTML. Need to do this in CSS.

Thanks

### Solution :

The \ character has special meaning; it is used to escape characters.

If you want to match a single \ character, you will need to use two of them \\:

.wsite-image-border-none img[src="image\\delta.jpg"]:hover {
opacity: 0.5;
}


img[src="image\\delta.jpg"]:hover {
opacity: 0.5;
}
<img src="image\delta.jpg" />

However, as pointed out in the comments, since paths typically use forward slashes, you may actually want:

.wsite-image-border-non img[src="image/delta.jpg"]:hover {
opacity: 0.5;
}


img[src="image/delta.jpg"]:hover {
opacity: 0.5;
}
<img src="image/delta.jpg" />