How can I target the `img src` attribute in CSS?

It's important to understand that you cannot directly target the `src` attribute of an `img` tag using CSS selectors. CSS is designed to style elements based on their structure, classes, IDs, and other attributes, but not the values of attributes like `src`. However, there are several effective workarounds to achieve similar results.

Here are the common approaches:

1. Using CSS Attribute Selectors with a Specific Value:

- You can target images based on a specific `src` value using attribute selectors. This is useful when you want to apply styles to images with a particular source.

- Example:

img[src="path/to/your/image.jpg"] {
  border: 2px solid red;
}

- This CSS rule will apply a red border to any `img` tag with the exact `src` value of "path/to/your/image.jpg".

2. Using CSS Attribute Selectors with Partial Matching:

- You can use partial matching to target images where the `src` attribute contains a specific string.

- Example:

img[src="your/image"] {
  filter: grayscale(100%);
}

- This CSS rule will apply a grayscale filter to any `img` tag where the `src` attribute contains the string "your/image".

3. Using CSS Attribute Selectors with Start or End Matching:

- You can also target images where the `src` attribute starts or ends with a specific string.

- Example:

img[src^="/images/"] {
  opacity: 0.8;
}
img[src$=".png"] {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

- The first rule applies an opacity of 0.8 to images where the `src` starts with "/images/". The second rule adds a box-shadow to images where the `src` ends with ".png".

4. Using JavaScript to Add Classes or Data Attributes:

- If you need more complex logic, you can use JavaScript to inspect the `src` attribute and add a class or data attribute to the `img` tag, which you can then target with CSS.

- Example (JavaScript):

const images = document.querySelectorAll('img');
images.forEach(img => {
  if (img.src.includes('specific-image')) {
    img.classList.add('specific-image-style');
  }
});

- Example (CSS):

.specific-image-style {
  / Your styles here /
  transform: scale(1.1);
}

In summary, while you cannot directly target the `img src` attribute in CSS, you can use attribute selectors to target images based on their `src` values or use JavaScript to add classes or data attributes for more complex styling scenarios. Choose the method that best suits your needs and the complexity of your project.

Learn more about this