How do you style an image in an tag?
How do you style an image in an <a> tag?
Here's some code that contains a
tags, one which contains an image.
a
<div class="container">
<a href="#">Not styled</a>
<a href="#"><img src="image.png"></a>
</div>
If I only want to style the image, how would I do it (without creating a class or something similar)?
For example, if I want to style all the a
tags, I could use the following CSS:
a
.container a {
/* styles here */
}
If I want to style all the img
tags, I could use this:
img
.container img {
/* styles here */
}
Is there a way to apply this same logic to an img
in an a
tag?
img
a
Edit: Here are the styles I'm applying. For some reason, when I use .container a img
it adds extra padding/margins.
.container a img
.container a {
padding: 9px 10px 5px 10px;
}
Edit 2: I think the problem lies elsewhere. Whenever I try any of the suggested responses (i.e. .container a img
, #img
, src="image.png"
) they all lead to the amount of vertical padding/margin increasing. Should I delete my post? It seems all it is getting is downvotes right now.
.container a img
#img
src="image.png"
.container a img
a img{}
or a>img{}
– Swellar
16 mins ago
a img{}
a>img{}
What style are you trying to give to your image? Can you post the css of the image styling too?
– Variable
14 mins ago
4 Answers
4
You can do a nested CSS
.container a img {
/* styles here */
}
I'm not sure if I'm doing something else wrong, but it doesn't seem to be working.
– Frank
15 mins ago
Can you post your styles? And what you want to achieve. Maybe it has something to do with it
– Bk Santiago
15 mins ago
All I have is padding. If I set both padding and margins to 0 with this code, there still seems to be some padding/margin, but it works fine if I just use
a
.– Frank
13 mins ago
a
Please check if adding
display: block;
on your img
works– Bk Santiago
2 mins ago
display: block;
img
It doesn't change anything.
– Frank
21 secs ago
I think you can simply use CSS to point exactly to the image like below:
img[src="image.png"]{
}
Yes You can do that, Have a look into the demo, it will be applied to all the images under a
tag
a
.container a img {
/* styles here */
}
If you just want a single image to be applied for css, try giving it an ID, then apply css to an id
Demo which applies to all
.container a img{
filter: sepia(100%);
}
<div class="container">
<a href="#">Not styled</a>
<a href="#"><img src="https://www.whistler.com/images/placeholders/200x200.gif" /></a>
<a href="#"><img src="https://www.whistler.com/images/placeholders/200x200.gif" /></a>
</div>
Demo which applies to single id
#img{
filter: invert(100%);
}
<div class="container">
<a href="#">Not styled</a>
<a href="#"><img src="https://www.whistler.com/images/placeholders/200x200.gif" /></a>
<a href="#"><img src="https://www.whistler.com/images/placeholders/200x200.gif" id='img' /></a>
</div>
You just to need to write CSS with a in heirarchy as
.container a img {
// your code
}
and your example will affect every
img
under a
in complete page, not just in .container
div
.– nelek
13 mins ago
img
a
.container
div
This was just a explanation for adding hierarchy. You can use .container as a parent if you want to affect only img tags inside container class
– Sonia
12 mins ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Sure,
.container a img
– aMJay
16 mins ago