html - CSSでdivの特定の要素をターゲットにする方法は?

Question

私はこのようないくつかのコードを持っています:

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

私の質問は、上記のコードを使用しているときに CSS で特定の画像をターゲットにするにはどうすればよいですか?

Answer 1

それは、ターゲットにするイメージに完全に依存します。それが最初のものであると仮定します（ただし、実装は両方で似ています）画像：

#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 セレクター。

Answer 2

画像にクラスを追加できます OR

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

また

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

Answer 3

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

それはそれを行う必要があります。

Answer 4

次の解決策はすべて、最近のブラウザーでのみ機能します。

子の位置で選択できます:

 #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 5

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

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