最初の画像に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/