The element selector you are using to style images (img) will indeed select any image element that matches this selector.
You need to make your CSS selectors more specific which you can achieve by targeting the image element more specifically. For example, by adding a class or id attribute to the image element’s HTML markup you can use that attribute value as the selector. See example below which takes a class as a selector (assumes the class name is element:
.element {
/* styles here */
}
If you wanted to avoid adding extra markup to your HTML with attributes, and you aren’t going to change your HTML markup or add any other images in the div with the class imgForBox, you could target it this way as well:
.imgForBox img {
/* styles here */
}
The above example creates a descendant selector which targets any img element that is a descendant of the element with the class imgForBox.
These are just two examples of achieving this, there are other ways but these two would be the most preferrable.
For editing specific image css. Firstly you have to know that,
- Image have any specific class name
- Image have any specific id name
- Does this images is inside any div which have class name or id
There are so many ways to select specific image css using all css selectors.
To know more about css selector click here
According to your code i can change its css like this:
- .Box-for-invite img {}
- .Box-for-invite div img{}
- .imgForBox img{}
So i have been trying to edit an image in css, so i made this
<body>
<div class="Box-for-invite">
<div class="imgForBox">
<img src="./img/Logo.png" width="60px" />
</div>
</div>
</body>
img {
width: 70%;
height: auto;
border-radius: 50%;
align-items: flex;
border: 5px solid #fff;
box-shadow: 5px 10px 20px grey;
}
but the problem is, that this part is applying to every single image in the website, I searched online and there is nothing that talks about it, and all tutorials use the same way I am doing right now, is there a way i could specify a certain image to edit?
You are welcome! In this case, where the element is a descendant (child) of another element (parent) you would create a selector that first selects the parent element followed by a space and then the element that you wish to target that is nested within that parent. With CSS, you can make a lot of different selectors that all have different levels of specificity. Remember that, whichever selector has the highest specificity will override others that may exist in your stylesheet that also match the same element target. Here is a reference –
