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" />


    CSS Howto..

    How to correct css for IE?

    How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to HTML/CSS Limit / Clip / Mask an object?

    How to remove the input field around an image button?

    How to make div stack first vertically then horizontally? [duplicate]

    How to combine 2 SASS functions as they do almost the same thing just using a different calculation?

    How to prevent javascript and css messing up?

    How to alternate rowcolor in a GridView using pure CSS?

    how to set responsive background-image of element using css?

    How to select the table heading of the first row in table using css selectors?

    How slow is * css selector for mobile browsers?

    How to set a td floating left in chrome?

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How to clip the top bar with screen

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to set gulp autoprefixer that it will be prefix css when I save my project

    How to have a logo in the middle of two menu lists?

    How to show something only when user prints?

    How to spread three columns in CSS across a page equally

    How to implement a CDN failsafe for css files?

    How to avoid overlapping text using CSS?

    How to get rid of the bottom shadow in label of the css tabs

    how decrease font size?

    Single
    with Box-Shadow = 6 cicles. How it works?

    How do you make a make a page's worth of empty space (with only a title) followed by a div in CSS?

    How to add a color in the
    bottom content area?

    How to apply a class in the current slide using bxslider?

    How to combine slide-in panels with sticky header?

    How to select first a element of li with CSS?