Td टैग के केवल पहले स्तर पर स्टाइल लागू करें

Question

क्या केवल कक्षा स्तर के td टैग में 'क्लास स्टाइल' लागू करने का कोई तरीका है?

<style>.MyClass td {border: solid 1px red;}</style>

<table class="MyClass">
  <tr>
    <td>
      THIS SHOULD HAVE RED BORDERS
    </td>
    <td>
      THIS SHOULD HAVE RED BORDERS
      <table><tr><td>THIS SHOULD NOT HAVE ANY</td></tr></table>
    </td>
  </tr>
</table>

Answer 1

क्या केवल कक्षा स्तर के td टैग में 'क्लास स्टाइल' लागू करने का कोई तरीका है?

हां ^* :

.MyClass>tbody>tr>td { border: solid 1px red; }

परंतु! >IE6 में ' ' डायरेक्ट-चाइल्ड सिलेक्टर काम नहीं करता है। यदि आपको उस ब्राउज़र का समर्थन करने की आवश्यकता है (जो आप शायद करते हैं, तो), आप सभी कर सकते हैं आंतरिक तत्व को अलग से चुनें और शैली को अन-सेट करें:

.MyClass td { border: solid 1px red; }
.MyClass td td { border: none; }

---

^* ध्यान दें कि पहला उदाहरण tbodyआपके HTML में नहीं पाया गया एक तत्व का संदर्भ देता है । यह आपके HTML में होना चाहिए था, लेकिन ब्राउज़र आमतौर पर इसे छोड़ने के साथ ठीक होते हैं ... वे इसे पर्दे के पीछे जोड़ते हैं।

Comments

मुझे ऐसी दुनिया को याद करने के लिए झिझक है जहाँ हमें IE6 के लिए डिबग करना पड़ा। इस पोस्ट में ठंड लग रही थी ..

— webfish

Answer 2

सीएसएस का उपयोग करने के बारे में कैसे: पहला बच्चा छद्म वर्ग:

.MyClass td:first-child { border: solid 1px red; }

Comments

यह काम नहीं करेगा। यह उन सभी tdबच्चों का चयन करता है , .MyClassजो बाल वृक्ष में होते हैं , जो पहले उनके तत्व से युक्त होते हैं, और इस प्रकार यह भीतर की शैली का भी निर्माण करेगा td।

— लाजो

यह कैसे कई upvotes है? :first-childनिश्चित रूप से ओपी की तलाश में प्रभाव नहीं होगा।

— plong0

Answer 3

ये शैली:

table tr td { border: 1px solid red; }
td table tr td { border: none; }

मुझे देता है:

यह http://img12.imageshack.us/img12/4477/borders.png

हालाँकि, क्लास का उपयोग करना शायद यहाँ सही तरीका है।

Comments

प्रत्येक एकल td तत्व पर एक वर्ग का उपयोग करना थोड़ा निरर्थक हो सकता है, आप शायद युक्त तालिका तत्व पर एक वर्ग का उपयोग करेंगे, और फिर आपको तालिकाओं के दूसरे स्तरों को बाहर करना होगा - अर्थात आपका पहला उदाहरण सही है।

— थोमसट्रेटर

Answer 4

बस एक MyClass के अंदर तालिकाओं के लिए चयनकर्ता बनाएं।

.MyClass td {border: solid 1px red;}
.MyClass table td {border: none}

(सभी आंतरिक तालिकाओं पर उदारतापूर्वक लागू करने के लिए, आप भी कर सकते हैं table table td।)

Answer 5

मैं तालिका के पहले कॉलम की चौड़ाई सेट करना चाहता था, और मुझे यह काम मिला (FF7 में) - पहला कॉलम 50px चौड़ा है:

#MyTable>thead>tr>th:first-child { width:50px;}

मेरा मार्कअप कहाँ था

<table id="MyTable">
 <thead>
  <tr>
   <th scope="col">Col1</th>
   <th scope="col">Col2</th>
  </tr>
 </thead>
 <tbody>
   ...
 </tbody>
</table>

Answer 6

मुझे लगता है यह उचित होगा।

.Myclass tr td:first-child{ }

 or 

.Myclass td:first-child { }

Comments

क्या पहले वाला tdप्रत्येक पंक्ति के पहले का चयन करता है और दूसरा केवल tdपृष्ठ के पहले का चयन करता है ?

— जोशुआ पिंटर

@JoshuaPinter आप मूल रूप से पहले वाले के बारे में सही हैं। सामान्य तौर पर, td:first-childकिसी भी tdतत्व का चयन करता है जो उसके मूल के तहत पहला तत्व है (कोई फर्क नहीं पड़ता कि उसका माता-पिता क्या है)। पहले वाला tr td:first-childयह शर्त जोड़ता है कि किसी भी स्तर पर tdनीचे tr(किसी भी स्तर पर, आवश्यक नहीं कि प्रत्यक्ष वंशज) होना चाहिए। tr > td:first-childएक का चयन करता है tdजो सीधे पहला तत्व है a tr। इसलिए अंततः :first-childओपी के प्रश्न के समाधान से कोई लेना-देना नहीं है और यह उत्तर गलत है।

— plong0

Answer 7

मुझे लगता है कि आप कोशिश कर सकते हैं

table tr td { color: red; }
table tr td table tr td { color: black; }

या

body table tr td { color: red; }

जहां 'बॉडी' आपके टेबल के माता-पिता के लिए एक चयनकर्ता है

लेकिन कक्षाएं यहाँ जाने के लिए सबसे सही तरीका है।