Targeting image link and CSS - css

Question

Basically I'm looking for a way to apply a specific style to an linked image like:
<img alt="" src="/media/XXXX.gif">
because my css can't do it despite a > img and i found that css3 can target specific a link depending on file type.So i try :
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
.HPDroite a[href$=".gif"]:hover {
text-decoration: none;
border: 0;
}
but nothing change, it's worth than before !
So what's the way to apply specific style to an a img ?
EDIT: after explaination by captain, my code look like:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
My goal is to set off the background property on a a img:hover.

Answer 1

Not sure I understand the question but if you are looking to set some css rules specifically to the image inside the link, you can put the into a class and call like such:
<a class="mylink" href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>
Then, to add css rules to it, you may call
.mylink img
{
/*Your css rules here*/
}
Hope it helps.

Answer 2

You need to alter your CSS, this code doesn't make sense:
.HPDroite a[href$=".gif"] {
text-decoration: none;
}
this is saying "target a class of HPDroite with a child element of an a tag that has an href ending in .gif".
Thus not targeting the a tag at all, nor the image inside.
I altered your code and made a codepen for you to see my changes.
See here: Codepen with fixes
Notice that I altered your CSS showing you how to target the a tag and how to target the image inside, as well as some added fanciness ;)!
Hope this helps and good luck with the project.
Updates due to change in question:
.PartieDroite1 p {
padding: 0.3em;
}
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
text-decoration: none;
border: 0;
background: none;
}
First of all, you are setting text-decoration on the image, this should only be on the a tag, since an image has no text, changes like so:
.PartieDroite1 a {
color: green;
padding: em(2px);
font-size: smaller;
}
.PartieDroite1 a:hover {
color: black;
background: green;
text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
This updates the image by default to have no border or background and still allows the a tag to have no text decoration.
As an example, I set the background of the image :hover to make the background pink.
"So what's the way to apply specific style to an a img ?"
Well, above I have demonstrated how to change the style of all images in the .PartieDroite1 > a > img - here:
.PartieDroite1 a > img[src$=".gif"] {
border: 0;
background: none;
}
and how to alter the image when hovered, here:
.PartieDroite1 a > img[src$=".gif"]:hover {
background: pink;
}
thus answering your question as I would interpret it.

Answer 3

So what's the way to apply specific style to an a img
To style a specific image format you would use:
This selector method
img[src$=".png"] {
border-color:yellow;
}
img {
border: 12px solid green
}
img[src$=".png"] {
border-color: yellow;
}
img[src$=".jpg"] {
border-color: red;
}
<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />
<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />
If the image in inside a link then the style would be :
.HPDroite a img[src$=".png"] {
border-color:yellow;
}
NOTE:
However, if you are trying to style the link based on the image format then that is not possible as there is no parent selector