Hi,

 

Im having real trouble using css selectors, its making no sense.

 

All I want to do is select the first image in a div and give it a border and padding, however everything I try ends up applying to all images.

 

The html is like so

 

<div class="project-item">		
	<div class="project-left">			
				<?php
					if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
				  the_post_thumbnail();
				} 
				?>

			<a href="<?php the_permalink();?>" title="Click for More" class="description">
			<img src="<?php bloginfo('template_directory'); ?>/images/magnify_solid.png" /> Want to read more?
			</a>
	</div>
	<div class="project-right">
		<h3><?php the_title(); ?></h3>
		<?php the_excerpt(); ?>
		<a class="readmore" href="<?php the_permalink();?>">Read More</a>
	</div>

</div>

 

I have tried everything from .project .project-left img:frist-child to .project .project-left img:first-of-type

 

 

Can anyone help me target the first image in .project-left??

 

 

Thanks

Are you spelling it correct? Just curious, as you state you've tried "frist-child", just wondering if you we're using that spelling in the CSS file as well.

No sarcasm intended.

Edited March 17, 201214 yr by Dissident

Are you looking to apply it to thumbnail or the actual <img> tag within the first div?

There is something wrong either with your syntax or your specificity. But you haven't posted up a link, nor your CSS, so trying to solve it is like stabbing around in the dark.

 

http://css-tricks.com/pseudo-class-selectors/

 

Also, get your general CSS knowledge correct, first-child/last-child are not CSS3.