How do you style an image in an tag?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


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"





Sure, .container a img
– aMJay
16 mins ago


.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.

Popular posts from this blog

Makefile test if variable is not empty

Will Oldham

'Series' object is not callable Error / Statsmodels illegal variable name