সিএসএস সহ দ্বিতীয় শেষ উপাদান নির্বাচন করুন


135

আমি ইতিমধ্যে জানি: শেষ সন্তান তবে ডিভটি নির্বাচন করার কোনও উপায় আছে:

<div id="container">
 <div>a</div>
 <div>b</div>
 <div>SELECT THIS</div> <!-- THIS -->
 <div>c</div>
</div>

দ্রষ্টব্য: jQuery ব্যতীত, কেবল CSS সহ


দ্বিতীয়-শেষ শিশুটি কেন তাৎপর্যপূর্ণ তা নিয়ে অবশ্যই কিছু যুক্তি রয়েছে?
ডেভিড টাং

হ্যাঁ কিছু শৈলী প্রয়োগের জন্য আমার শেষ এবং দ্বিতীয়-শেষ উভয়ই নির্বাচন করতে হবে
ডায়ামিক

কেন আপনি কেবল ২ য় শেষ
ডিভ

3
"কেন আপনি কেবল ২ য় সর্বশেষ ডিভের জন্য ক্লাস রাখতে পারবেন না": সম্ভবত আপনি যদি স্টাইলের সামগ্রী তৈরি করেন যা উত্পন্ন হচ্ছে, যেখানে আপনি দ্বিতীয় শেষ আইটেমটিতে কোনও শ্রেণি যুক্ত করার (সহজ) অ্যাক্সেস নেই?
হেনরিক

উত্তর:


271

সিএসএস 3 এ আপনার রয়েছে:

:nth-last-child(2)

দেখুন: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child

নবম-শেষ-চাইল্ড ব্রাউজার সমর্থন:

  • ক্রোম 2
  • ফায়ারফক্স 3.5
  • অপেরা 9.5, 10
  • সাফারি ৩.১, ৪
  • ইন্টারনেট এক্সপ্লোরার 9

1
আপনি বেছে নেওয়ার চেষ্টা করছেন এমন ডিভের সাথে কোনও শ্রেণি সংযুক্ত না করতে পারলে সম্ভবত যাওয়ার উপায় এটি। ফ্রস্টি যেমন উল্লেখ করেছেন, CSS3 পুরানো ব্রাউজার বা IE দ্বারা সমর্থিত নয়। আপনি যদি ক্রস ব্রাউজারের সামঞ্জস্যতা সম্পর্কে উদ্বিগ্ন হন তবে জ্যাকুয়ারি একটি আরও ভাল বিকল্প।
টমাস

এটি লিঙ্কিত নিবন্ধ থেকে একটি অনুলিপি / পেস্ট ছিল ... সম্পাদিত উত্তর, ধন্যবাদ।
ফ্রস্টি জেড

1
সিএসএসে সমাধান: # কনটেইনার>: নবম-সর্বশেষ-শিশু (২) {পটভূমি: লাল; live দয়া করে এটি লাইভে দেখতে এই কোডেপেনটি দেখুন: কোডেপেন.আইও
মার্ক_ডাহান

এখন যেহেতু আমাদের পুরানো IE সমর্থন করার দরকার নেই, এই উত্তরটি পুরোপুরি কার্যকর হবে। সত্যিই, যদি লোকেরা এখনও IE 8 বা তার বেশি ব্যবহার করে থাকে তবে তারা সুন্দর জিনিস পাওয়ার যোগ্য নয়।
স্ট্যান্ডেন্ডার

59

দ্রষ্টব্য: এই উত্তরটি পোস্ট করেছেন কারণ ওপি পরে মন্তব্যে বলেছিল যে তাকে কেবল পেনাল্টিমেট নয়, শেষ দুটি উপাদান নির্বাচন করতে হবে।


:nth-childসিএসএস 3 নির্বাচক আসলে আরো সক্ষম চেয়ে আপনি কি কখনো কাল্পনিক হয়!

উদাহরণস্বরূপ, এটি শেষ 2 উপাদান নির্বাচন করবে #container:

#container :nth-last-child(-n+2) {}

তবে এটি একটি সুন্দর বন্ধুত্বের শুরু মাত্র।


খুব ভাল, আমার উত্তরটি কেবলমাত্র সর্বশেষ সন্তানের বিয়োগ 1 নির্বাচন করে this এটি সম্পর্কে জানতেন না। + 'ডি
আরএসপ্ল্যাক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.