CSSのdivの特定の<img>要素をターゲティングするにはどうすればよいですか？

Question

私は何をこのようないくつかのコードをしました：

<div id="foo"> 
<img src="bar.png" align="right"> 
<img src="cat.png" align="right"> 
</div> 

上記のコードを持ったときに、私はCSSで特定の画像を対象としますか今私の質問はありますか？

Answer 1

次の解決策のすべてが唯一、最近のブラウザで動作画像や

#foo img:nth-child(2) { css here } 

または

#foo img:first-child { css here } 
#foo img:last-child { css here } 

Answer 2

div > img:first-child {/*the first image*/} 
div > img:last-child {/*the last image*/} 

そうすべきです。

Answer 3

にクラスを追加することができます。

あなたは子供の位置によって選択することができます。

#foo img:first-child { /* for the bar */ } 
#foo img:nth-child(2) { /* for the cat */ } 

あなたは画像のみを数え、子供の位置によって選択することができます。

#foo img:first-of-type { /* for the bar */ } 
#foo img:nth-of-type(2) { /* for the cat */ } 

あなたは画像のURLによって選択することができます。

#foo img[src^=bar] { /* for the bar */ } 
#foo img[src^=cat] { /* for the cat */ } 

Answer 4

これは、どのイメージをターゲットにするかによって完全に異なります。

#foo img[src="bar.png"] { 
    /* css */ 
} 


#foo img[src^="bar.png"] { 
    /* css */ 
} 

#foo img:first-child { 
    /* css */ 
} 

#foo img:nth-of-type(1) { 
    /* css */ 
} 

参照：

• CSS3 selectorsそれが最初の（実装の両方のために類似しているが）、画像の仮定。

Answer 5

#foo > IMG:first-child {/* first of two IMGs */} 
#foo > IMG + IMG  {/* second one */} 

IE7 +を含むすべてのブラウザで動作します。

Answer 6

誰もがなぜ#foo divに固定されているのかわかりません。あなたはimgタグをターゲットにすることができ、divタグについて心配する必要はありません。これらの属性セレクタは、「で始まる」で選択します。

img[src^=bar] { css } 
img[src^=cat] { css } 

これらは「contains」で選択します。

img[src*="bar"] { css } 
img[src*="cat"] { css } 

正確なsrcで選択できます。

img[src="bar.png"] { css } 
img[src="cat.png"] { css } 

両方をターゲティングする場合は、div idを使用できます。

#foo img { css } 

イメージのうちの1つについては、#foo divをまったく心配する必要はありません。