Я хотел бы применить css к первому изображению

Question

Я пробовал first-child, но я не мог заставить его работать.

CSS

.post_locked2 img:first-child { 

HTML

<div class="post_locked2"> 
    <h1>title... 
    <h2>Subtitle.... 
    <p>..... 
    <p>.... 
    <img class="aligncenter" src="http://www.what... 
    <img title="RockDizFile" src="http://...... 
    <img title="Bullet" src="http://wwww....... 
</div> 

Как бы применить CSS только первое изображение?

Answer 1

Вы пробовали это?

post_locked2>.aligncenter:first-child {some:styles;} 

или

post_locked2>img:first-child {some:styles;} 

Answer 2

:first-child выбирает только для первого ребенка родительского элемента. В примере OP :first-child будет h1, поэтому img:first-child на самом деле ничего не выберет.

Используйте вместо этого nth-of-type(1).
http://reference.sitepoint.com/css/pseudoclass-nthoftype

<!-- in the head --> 
<style> 
.post_locked2 img:nth-of-type(1){ 
    border:5px solid red; 
} 
</style> 

<!-- in the body --> 
<div class="post_locked2"> 
<img class="aligncenter" src="http://www.what... 
<img title="RockDizFile" src="http://...... 
<img title="Bullet" src="http://wwww....... 
</div> 

А вот еще один пример этого в использовании: http://jsfiddle.net/FsEhD/