Targeting image link and CSS

Question

Basically I'm looking for a way to apply a specific style to an linked image like:

<a href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>

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.

It's hard to understand what you're asking, but if I understand it right, it has absolutely nothing to do with CSS3 or SASS. It's a simple CSS question: How do I a style to an img tag nested in a `a` tag? Right? — markus, Sep 17 '15 at 13:40
it's css but applied with sass and css3 syntax because actually my a/hover is applied to text and img...i don"t want it on img,so i saw css can't do that but css3 yes by targeting image file extension.https://perishablepress.com/css-remove-link-underlines-borders-linked-images/ — webmaster pf, Sep 17 '15 at 13:43
You don't seem to understand how attribute selectors work. Unless the href of your anchor element ends with `.gif`, your selector is not doing any good. — cimmanon, Sep 17 '15 at 13:44
Unless you have a Sass->CSS compilation issue, do not post Sass code. — cimmanon, Sep 17 '15 at 14:11

score 1 · Answer 1 · answered Sep 17 '15 at 13:50

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.

answered Sep 17 '15 at 13:50

Logan Hasbrouck

406
4
19

thanks logan but your way need to apply a class to my a element, and it's a dynamic link. – webmaster pf Sep 17 '15 at 14:10
Not sure what you mean by 'dynamic link' but the css will still be applied even if the href changes. Are you attempting to modify the effects of an image inside a link if that image happens to be a .gif? – Logan Hasbrouck Sep 17 '15 at 14:17

score 0 · Accepted Answer · 2015-09-17T14:22:35.423

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.

thanks a lot to explain as css3 work in this case.My code is for scss...forgotten to precise.I edit my post to show my actual code and goal. — webmaster pf, Sep 17 '15 at 14:03
Why did you mark my answer down? I answered correctly for the question at the time. — , Sep 17 '15 at 14:06
Updated my answer to answer your question, if there is anything specific you need extra, please leave a comment here and don't mark me down, if the answer helps however, give me a vote up :). Cheers, SkullDev — , Sep 17 '15 at 14:23

score -1 · Answer 3 · edited May 23 '17 at 10:27

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

This will not remove the underline created by the anchor element. — cimmanon, Sep 17 '15 at 14:04

Targeting image link and CSS

3 Answers3