0

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>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
GloryToPeePo
  • 36
  • 7
  • What have you tried here? We can fix what you have tried if you can give the parent HTML for example anything that wraps it that has an id or class and the CSS we can help you better. – Mark Schultheiss Jan 06 '23 at 13:02
  • Does this answer your question? [CSS hide all images with matching SRC attribute](https://stackoverflow.com/questions/6763899/css-hide-all-images-with-matching-src-attribute) – Pavel Schiller Jan 06 '23 at 13:05
  • I added a snippet to assist you in creation of a better question to place the HTML and CSS attempted thus far – Mark Schultheiss Jan 06 '23 at 13:14

5 Answers5

2

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

Dave111
  • 429
  • 9
1

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.

Brandon
  • 385
  • 1
  • 8
  • Another alternative would be using a pseudo class like this: `img:nth-of-type(2) { /* styles */ }` – Juljo Shahini Jan 06 '23 at 13:09
  • True, this would work if your webpage is guaranteed to remain static. Depending on the structure of the page, this could break if images are added or removed. – Brandon Jan 06 '23 at 13:10
1

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.

mat
  • 1,619
  • 1
  • 15
  • 25
-1

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;
}
Anna Azzam
  • 252
  • 2
  • 7
-1

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

body .parent-class img { width: 100px; height: 100px;}

USAMA KHALID
  • 1
  • 2
  • 1
    Please do not post link only or picture only answers, post actual code to best assist the OP and others who later view this. – Mark Schultheiss Jan 06 '23 at 13:09
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 07 '23 at 13:35