पंक्ति में पहले और अंतिम टीडी का चयन कैसे करें?

Question

आप पंक्ति में पहली और अंतिम TD का चयन कैसे कर सकते हैं?

tr > td[0], 
tr > td[-1] { 
/* styles */ 
} 

Answer 1

आप :first-child और :last-child छद्म चयनकर्ताओं इस्तेमाल कर सकते हैं:

tr td:first-child, 
tr td:last-child { 
    /* styles */ 
} 

यह सभी प्रमुख ब्राउज़रों में काम करना चाहिए, लेकिन IE7 जब तत्वों गतिशील रूप से जोड़ा जाता है कुछ समस्या है (और यह काम नहीं करेगा आईई 6 में)।

Answer 2

आप निम्नलिखित स्निपेट का उपयोग कर सकते

:

tr td:first-child {text-decoration: underline;} 
    tr td:last-child {color: red;} 

निम्नलिखित छद्म वर्गों का उपयोग करते हुए पहले बच्चे का अर्थ है "इस तत्व का चयन करता है, तो वह अपने माता पिता की पहले बच्चे है "।

: पिछले वाले बच्चे "इस तत्व का चयन करता है, तो वह अपने माता पिता की अंतिम संतान है" का मतलब है।

केवल तत्व नोड्स (HTML टैग) प्रभावित होते हैं, ये छद्म-वर्ग टेक्स्ट नोड्स को अनदेखा करते हैं।

Answer 3

आप इस्तेमाल कर सकते हैं: पहली बच्चे और : पिछले वाले बच्चेpseudo-selectors:

tr td:first-child{ 
    color:red; 
} 
tr td:last-child { 
    color:green 
} 

या आप दोनों जिस तरह से पूरी तरह से काम कर रहे हैं

तरह

// To first child 
tr td:nth-child(1){ 
    color:red; 
} 

// To last child 
tr td:nth-last-child(1){ 
    color:green; 
} 

अन्य तरीके से उपयोग कर सकते हैं

Answer 4

यदि पंक्ति में कुछ अग्रणी (या पिछला)है td मीटर से पहलेटैग आपको :first-of-type और :last-of-type चयनकर्ताओं का उपयोग करना चाहिए। अन्यथा पहले td का चयन नहीं किया जाएगा यदि यह पंक्ति का पहला तत्व नहीं है।

यह देता है:

td:first-of-type, td:last-of-type { 
    /* styles */ 
}