html classes with same name within a parent class - css

Question

I have a parent class which contains 4 sub-classes, each of which contain 2 more classes. The problem I have is all sub-classes have the same name! As its a wordpress theme I cant change that html so I simply want to use a custom css sheet to change each one individually. The content differs for each class, so is there a way using child elements or the like?
<div class="feature-box-main site-aligner">
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon1.png">
<div class="feature-title">Page Title 1</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon2.png">
<div class="feature-title">Page Title 2</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon3.png">
<div class="feature-title">Page Title 3</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box last">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon4.png">
<div class="feature-title">Page Title 4</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box --><div class="clear"></div>
</div>

Answer 1

Select the first div with:
.feature-box-main.feature-box:nth-child(1) {
// styles
}
and the second div with
.feature-box-main.feature-box:nth-child(2) {
// styles
}

Answer 2

simply use the n(th) child selector:
Notice the space between the classes, otherwise you are looking for one element with both classes.
.feature-box-main .feature-box:nth-child(1) {
/*styles for first div here*/
}
.feature-box-main .feature-box:nth-child(2) {
/*styles for second div here*/
}
Also, since you mentioned you want to change the image and title, if you mean not just css changes maybe jQuery come in hand like this:
var div1 = $('.feature-box-main .feature-box').eq(1);
var div2 = $('.feature-box-main .feature-box').eq(2);
//for example:
div1.children('.feature-title').html('new Title');
div2.children('img').attr('src','new-imge.jpg');