সিএসএস ব্যবহার করে আমি কীভাবে একটি নির্দিষ্ট নম্বর শিশু পেতে পারি?

Question

আমার আছে একটি table যার tdগতিশীলভাবে তৈরি করা হয়েছে। প্রথম এবং শেষ সন্তান কীভাবে পেতে হয় তা আমি জানি তবে আমার প্রশ্নটি হ'ল:

সিএসএস ব্যবহার করে দ্বিতীয় বা তৃতীয় সন্তান পাওয়ার কোনও উপায় আছে কি?

Answer 1

আধুনিক ব্রাউজার, ব্যবহারের জন্য td:nth-child(2)সেকেন্ডের জন্য td, এবং td:nth-child(3)তৃতীয় জন্য। মনে রাখবেন যে এগুলি প্রতিটি সারির জন্য দ্বিতীয় এবং তৃতীয়টি পুনরুদ্ধার td করে ।

ভার্সন 9 এর চেয়ে পুরনো IE এর সাথে আপনার যদি সামঞ্জস্যতা প্রয়োজন হয়, তবে টিমের পরামর্শ অনুসারে ভাইবোন সংযুক্তকারী বা জাভাস্ক্রিপ্ট ব্যবহার করুন । তাঁর পদ্ধতির ব্যাখ্যা এবং চিত্রের জন্য এই সম্পর্কিত প্রশ্নের আমার উত্তরও দেখুন ।

Comments

ভুলে যাবেন না যে এটি কেবল সিএসএস 3 নির্বাচকদের সাথে কাজ করে (অন্য কথায়, 9 এর পূর্বে আইই সংস্করণে নয়)।

— জিনাক

শীঘ্রই অতীতের একটি উদ্বেগ ... এ সম্পর্কে আমার অনুভূতি ।

— বেলারুশ ডিগনাস

একটি সাধারণ সমাধান হিসাবে, td:nth-of-type(3)ভাল। পূর্ববর্তী দুই ভাইবোনের উপাদানগুলির নির্বিশেষে, এমনtd:nth-child(3) একটি উপাদানের সাথে মিলবে যা তার পিতামাতার একটি এবং তৃতীয় সন্তানের উভয়ই । তৃতীয় পাবেন , কত অ নির্বিশেষে উপাদানের এটা আগে হয় । যদি আপনি চান তার আগে যদি কোনও অ- উপাদান না থাকে তবে উভয় নির্বাচক একই জিনিসটির সাথে মিলবে। td td:nth-of-type(3)tdtdtd

— সিজে ডেনিস

Answer 2

আইই 7 এবং 8 এর জন্য (এবং সিএসএস 3 ব্যতীত অন্য ব্রাউজারগুলি আইআই 6 অন্তর্ভুক্ত নয়) আপনি ২ য় এবং ৩ য় শিশু পেতে নিম্নলিখিত ব্যবহার করতে পারেন:

২ য় সন্তান:

td:first-child + td

তৃতীয় শিশু:

td:first-child + td + td

তারপরে + tdআপনি যে প্রতিটি অতিরিক্ত বাচ্চার বাছাই করতে চান তার জন্য কেবল আরও একটি যুক্ত করুন।

আপনি যদি আই 6 সমর্থন করতে চান তবে এটিও করা যেতে পারে! আপনার কেবলমাত্র একটি সামান্য জাভাস্ক্রিপ্ট ব্যবহার করতে হবে (এই উদাহরণে jQuery):

$(function() {
    $('td:first-child').addClass("firstChild");
    $(".table-class tr").each(function() {
        $(this).find('td:eq(1)').addClass("secondChild");
        $(this).find('td:eq(2)').addClass("thirdChild");
    });
});

তারপরে আপনার সিএসএসে আপনি যা পছন্দ করেন তা পরিবর্তন করতে কেবল সেই শ্রেণি নির্বাচকদের ব্যবহার করুন:

table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }

Comments

আই 7/8 টিপের জন্য আপনাকে ধন্যবাদ। দুর্দান্ত কাজ করে।

— ব্রেন্ডন ক্রফোর্ড

আপনি আমার উত্তরে সিএসএস 3 নির্বাচনকারী বা আপনার নিজের সিএসএস 2 নির্বাচনকারীকে নিতে পারেন এবং এগুলি সরাসরি jQuery এ ফেলে দিতে পারেন এবং তারা আই 6 তে প্রাকৃতিকভাবে কাজ করবে। ক্লাস যুক্ত করতে এই সমস্ত অতিরিক্ত হুপের মধ্য দিয়ে ঝাঁপিয়ে পড়ার দরকার নেই।

— BoltClock