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

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 में कुछ समस्याएं हैं जब तत्वों को गतिशील रूप से जोड़ा जाता है (और यह IE6 में काम नहीं करेगा)।

Comments

और क्या होगा यदि आप दूसरे और तीसरे बच्चे का चयन करना चाहते हैं?

— क्लार्क

और क्या बीच का अंतर tr > tdऔर tr td?

— क्लार्क

निम्न नियम उन सभी P तत्वों की शैली सेट करता है जो BODY के बच्चे हैं: शरीर> P {पंक्ति-ऊंचाई: 1.3} आप यहां देख सकते हैं: w3.org/TR/CSS2/selector.html#child-selectors (समान पोस्ट) जेम्स द्वारा)

— फ्रांसेस्को

@ क्लार्क - >केवल बच्चों का चयन करता है। इसके बिना, सभी वंशज (जैसे बच्चों के बच्चे) का चयन किया जाएगा। दूसरे या तीसरे बच्चे का चयन करने के लिए, nth-childछद्म चयनकर्ता देखें।

— जेम्स एलार्डिस

@BoltClock मैंने एक बार इस समस्या का उपयोग करके आपके समाधान को देखा +। कुछ ऐसा है tr td + td + .... +td लेकिन क्या होगा अगर मुझे नहीं पता कि मेरे पास कितने td हैं?

— रॉय नमिर

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

यदि आप sass (scss) का उपयोग करते हैं तो आप निम्नलिखित स्निपेट का उपयोग कर सकते हैं:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

Answer 5

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

यह देता है:

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

Comments

आपने मेरा समय बचाया मैं अंतिम बच्चे का उपयोग कर रहा था जो काम नहीं कर रहा था लेकिन आपके समाधान ने पूरी तरह से काम किया

— मिर्जा ओबैद