CODEWITHSUNDEEP
htmlcss
apgibson
apgibson

Reputation: 1

Targeting a single image in CSS

With the following css/htms

    <p>&nbsp;</p>
<p><a href="#bottom"><img title="power gains" src="{{media url="wysiwyg/powergains.png"}}" alt="show power gains"></a></p>

<p><a title="Navistar" href="http://bluesparkautomotive.com/instructionfiles/073_ppb.pdf" target="_blank"><img src="{{media url="wysiwyg/installation.png"}}" alt="" /></a></p>

I need to target the bottom image with the following:

img:hover{box-shadow: 6px 6px 20px rgba(0,0,0,.6); transform:scale(1.02);}
img:focus{box-shadow: 12px 12px 25px rgba(0,0,0,.7); width: 46%; transform: none;}

And leave all other images without the formatting.

Upvotes: 0

Views: 550

Answers (2)

j08691
j08691

Reputation: 207891

You can use p > a[title="Navistar"] > img. The a[title="Navistar"] is an attribute selector.

Upvotes: 1

neohaojun
neohaojun

Reputation: 312

Since you need a specific image to be chosen, you can add an id tag to the img element so that it can be specifically selected. id tags are unique and cannot be shared, but the id name can be chosen by yourself.

<img src="" id="id123" />

And in your CSS, use a # to specify that you are looking for an id:

#id123:hover {[css]}

This is not really related to your question but it would be good for future use. You can use a class tag if you want to choose a group of elements to be styled the same way. This can be done by:

<img src="" class="class123" />

class is not specific to 1 element but can be shared among a group of elements that require the same style. You can locate such elements with . in your CSS:

.class123:hover {[css]}

Upvotes: 0

Related Questions