Using CSS Attribute Selectors to Target The Src of Background-Image

Using CSS Attribute Selectors to target the src of background-image

If background-image is your only inline CSS property, you can do this:

.bg-image {    background-size: cover;    background-repeat: no-repeat;    background-position: center;    min-height: 300px;    max-height: 700px;}
.bg-image[style^="background-image:"][style$=".svg)"] {  background-size: 103px 94px;}

<div class="bg-image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg)"></div>

Targeting image link and CSS

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.

How to find img with a certain src url and change css using vanilla javascript?

You dont need js or jquery for this - use the CSS attribute selector and hide the image based on the src attribute matching the target text. Note the syntax of the selector to match the src attribute value which is any text preceded by "https://www.google"

img[src ^= "https://www.google"]{  display: none;}

<img src="https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwi39tv6xerjAhUPfysKHYwUBfIQjRx6BAgBEAU&url=https%3A%2F%2Fweheartit.com%2Fentry%2F230207975&psig=AOvVaw2PDSxeoivmwsXMXWxVICIQ&ust=1565053762473751" alt="google-image"  title="google-image" /><img src="https://via.placeholder.com/100x150" alt="not google-image"   title="not google-image" />

CSS selectors : styling link which contains img

selectors? http://www.w3.org/TR/CSS2/selector.html

You could also use js to target the image file src and then use that to append a class to the link

Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Use content:url("image.jpg").

Full working solution (Live Demo):

<!doctype html>

<style>
.MyClass123{
    content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Using CSS Attribute Selectors to Target The Src of Background-Image