How can I style an image in css without having to give the image a class?-CodePudding

I'm working right now on a CMS called TYPO3 v.10 , this CMS is pretty complicated to me.

I have an image and a css-file, I can't give the image a class or an id, I can give the image basically nothing, it's just there and i have to style it.

So my question here is: How can I style the image without giving it a class or an Id or anything else?(maybe using the source or something like that?)

I've used the img tag in css, but I've changed every single image in the whole CMS.

/* not desired as it effects all images */
img {
  width: 100;
  height: 100;
}

<div>my missing HTML here</div>

CodePudding user response：

You can select an image by using its parent. For example .image-container img, which will target all the images within the parent, or use .image-container > img, which will target only image within the parent, but not images that are within children.

If your images dont have a parent, you can select them using body element and nth-of-type() selector. For example body img:nth-of-type(2) to target second img withint the body

CodePudding user response：

Can you perhaps find a specific container(s)? If so, you can add a style to that. E.g.

section header .containername img {
}

If not, perhaps you can try other selectors. There are so many e.g. https://www.w3schools.com/cssref/css_selectors.php

If that doesn't work, perhaps you can use javascript to add a class to the specific image, it's container or anything near it.

CodePudding user response：

You're correct, you should be able to target the image using its source URL and the CSS attribute selector:

img[src="img/url.png"] {
  /* styles */
}

You can also use *="value" instead of ="value" to select any image whose source contains (but is not necessarily equal to) value.

Read more about attribute selectors on MDN Web Docs.

CodePudding user response：

Are there multiple images on your webpage? If there is only one, you can add styling to the img tag in CSS:

img {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

CodePudding user response：

You can add CSS to the image by calling the parent class in which you used the "img" tag. Check the provided attachment!

Image CSS