सीएसएस में एक div के विशिष्ट <img> तत्व को कैसे लक्षित करें?

Question

मैं क्या इस तरह की कुछ का एक कोड है:

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

अब मेरे सवाल है कि कैसे मैं सीएसएस में एक विशिष्ट छवि को लक्षित करने उपरोक्त कोड होने करते हैं?

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 पर इतना तय क्यों है। आप आईएमजी टैग को लक्षित कर सकते हैं और div टैग के बारे में भी चिंता नहीं कर सकते हैं। ये गुण चयनकर्ता "प्रारंभ से" चुनते हैं।

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

ये "शामिल" द्वारा चुने गए हैं।

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

या आप सटीक स्रोत द्वारा चयन कर सकते हैं।

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

यदि आप दोनों को लक्षित करना चाहते हैं, तो आप div आईडी का उपयोग कर सकते हैं।

#foo img { css } 

छवियों में से एक के लिए, वहाँ सब पर #foo div के बारे में चिंता करने की कोई जरूरत नहीं है।