Clash Royale CLAN 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{}

a>img{}

4 Answers
4

You can do a nested CSS

.container a img {
/* styles here */
}


a

display: block;

img

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
}


img

a

.container

div

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.