CSS to add class to first img in div when all text and images are wrapped in <p> tags
We have a
Wordpress
site and the way we've added the images to all of the posts has left the posts looking like this:
<div class="entry-content">
<p>Some Text</p>
<p>More Text</p>
<p><img src="http://something.com"></p> <-- This is the img I'm trying to get</p>
<p><img src="http://somethingelse.com"></p>
</div>
Is there a way to use nth-of-type(1) to apply a class to that first image?
Solutions
--EDITED-- @ Original Poster: You can target which one does what simply by changing the values in the CSS. Compare this with the below link: http://jsfiddle.net/SinisterSystems/xgL69/3/
And if you can get rid of the
<p>
tags, use
first-child
:
http://jsfiddle.net/SinisterSystems/xgL69/4/
Here's a quick mock up for ya:
http://jsfiddle.net/SinisterSystems/xgL69/2/
HTML:
<div id="cont">
<p><img src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg" /></p>
<p><img src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg" /></p>
<p>Hello</p>
</div>
CSS:
#cont p:nth-of-type(1) img:nth-of-type(1) {
width:25px;
height:25px;
}
Try this:
p:nth-of-type(1) img
or if there's more than one img
p:nth-of-type(1) img:nth-of-type(1)
This seems to work:
div.entry-content p:nth-last-child(2) img {
border:4px solid #faa;
}
jsFiddle example
