নবম-সন্তানের সাথে শেষ এন আইটেমগুলি নির্বাচন করা কি সম্ভব?


130

একটি স্ট্যান্ডার্ড তালিকা ব্যবহার করে, আমি শেষ 2 টি তালিকা আইটেম নির্বাচন করার চেষ্টা করছি। আমি বিভিন্ন ক্রিয়েটমেশন পেয়েছি An+Bতবে কিছুই শেষ 2 টি নির্বাচন করে বলে মনে হচ্ছে না:

li:nth-child(n+2) {} /* selects from the second onwards */
li:nth-child(n-2) {} /* selects everything */
li:nth-child(-n+2) {} /* selects first two only */
li:nth-child(-n-2) {} /* selects nothing */

আমি :nth-last-child()পছন্দ করি এমন একটি নতুন সিএসএস 3 নির্বাচনকারী সম্পর্কে সচেতন তবে আমি এমন কিছু পছন্দ করবো যা সম্ভব হলে আরও কয়েকটি ব্রাউজারে কাজ করে (বিশেষত IE সম্পর্কে চিন্তা করবেন না)।


5
IE তবুও, ব্রাউজার সমর্থন quirksmode.org অনুযায়ী:nth-last-child() হিসাবে প্রায় একই । এছাড়াও, এবং উভয়ই সিএসএস 3 তে প্রবর্তিত হয়েছিল, সে দিক থেকে কোনওটিই পুরানো বা নতুন নয়। :nth-child() :nth-child():nth-last-child()
BoltClock

প্রচুর দরকারী nth-childকৌশলগুলি সিএসএস-ট্রিকস
এম 5713

উত্তর:


273

এটি একটি তালিকার শেষ দুটি আইএমএস নির্বাচন করবে:

li:nth-last-child(-n+2) {color:red;}
<ul>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
  <li>fred</li>
</ul>


হ্যাঁ তবে আপনি ব্যবহার করছেন :nth-last-child()যা ইতিমধ্যে উল্লেখ করা হয়েছে।
বোল্টক্লক

6
(-n + 2) => এটি আমি খুঁজছি। ধন্যবাদ
সুরজিথ এসএম

16
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, হ্যাঁ, নবম-শেষ-সন্তানের ইতিমধ্যে উল্লেখ করা হয়েছিল, তবে ঠিক কীভাবে (-n + b) একটি দুর্দান্ত কৌশল নয়
ব্ল্যাকটাইজারএক্স

56

nth-last-childমনে হচ্ছে এটি বিশেষত এই সমস্যাটি সমাধান করার জন্য তৈরি করা হয়েছিল, সুতরাং এর চেয়ে আরও উপযুক্ত কোনও বিকল্প আছে কিনা তা নিয়ে আমি সন্দেহ করি। সমর্থন যদিও বেশ শালীন দেখায় ।


লিঙ্কটির জন্য ধন্যবাদ - মনে হচ্ছে নবম-সন্তানের সমর্থনটি আসলে নবম-শেষ-সন্তানের মতোই (আমি নিশ্চিত যে IE8 নবম-সন্তানের সমর্থিত তবে সম্ভবত নয়)।
অসন্তুষ্ট গোয়াট


1

শব্দার্থবিজ্ঞানের সংজ্ঞার কারণে nth-child, আমি জড়িত উপাদানগুলির তালিকার দৈর্ঘ্য অন্তর্ভুক্ত না করে এটি কীভাবে সম্ভব তা দেখছি না। শব্দার্থবিজ্ঞানের মূল বক্তব্যটি হ'ল শিশু উপাদানগুলির একগুচ্ছ পুনরাবৃত্তি গোষ্ঠীগুলিতে বিভক্তকরণ ( সম্পাদনা - ধন্যবাদ বোল্টক্লক) বা কিছু স্থির দৈর্ঘ্যের প্রথম অংশে, "বাকীগুলি" এর পরে। আপনি এর বিপরীতে চান - যা nth-last-childআপনাকে দেয়।


1
আপনার সাথে উল্লেখ :nth-child()করে প্রথম mউপাদান নির্বাচন করতে পারেন :nth-child(-n+m)
BoltClock

@ বল্টক্লক আমি এক সেকেন্ডের জন্য সে সম্পর্কে ভাবতে যাচ্ছি ... ওহ, হ্যাঁ আপনি ঠিক সে সম্পর্কেই ঠিক বলেছেন। স্পষ্টতই আমি সিএসএস 3 নির্বাচকদের যেভাবেই আবিষ্কার করতে গিয়ে কমিটির উদ্দেশ্য কী ছিল তা নিয়ে গুরুতর বক্তব্য দেওয়ার মতো অবস্থানে নেই :-)
পয়েন্টি

-2

আপনি যদি আপনার প্রকল্পে jQuery ব্যবহার করছেন, বা এটি অন্তর্ভুক্ত করতে ইচ্ছুক থাকেন তবে আপনি nth-last-childতার নির্বাচক এপিআইয়ের মাধ্যমে কল করতে পারেন (এটি এই সিমুলেটেড এটি ব্রাউজারটি অতিক্রম করবে)। এখানে একটি nth-last-childপ্লাগইনের লিঙ্ক রয়েছে । আপনি যদি আগ্রহী এমন উপাদানগুলিকে লক্ষ্য করে এই পদ্ধতিটি গ্রহণ করেন:

$('ul li:nth-last-child(1)').addClass('last');

এবং তারপর শৈলী আবার lastপরিবর্তে বর্গ nth-childবা nth-last-childছদ্ম নির্বাচকরা, আপনি একটি আরো অনেক কিছু সামঞ্জস্যপূর্ণ ক্রস ব্রাউজার অভিজ্ঞতা থাকতে হবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.