আমার লক্ষ্যটি সিএসএসকে সর্বশেষে প্রয়োগ করা li, তবে এটি তা করে না।
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>আমি কীভাবে কেবলমাত্র শেষ সন্তানের নির্বাচন করতে পারি ?
উত্তর:
:last-childPseudoclass এখনও নির্ভরযোগ্যভাবে ব্রাউজারগুলি জুড়ে ব্যবহার করা যাবে না। বিশেষ করে, ইন্টারনেট এক্সপ্লোরার সংস্করণ <9, এবং সাফারি <3.2 স্পষ্টভাবে এটা সমর্থন করে না , যদিও ইন্টারনেট এক্সপ্লোরার 7 ও সাফারি 3.2 না সমর্থন :first-childঅদ্ভুতভাবে।
আপনার সেরা বাজি হ'ল স্পষ্টভাবে last-childসেই আইটেমটিতে একটি (বা অনুরূপ) শ্রেণি যুক্ত করা এবং li.last-childতার পরিবর্তে আবেদন করা।
:last-child ।
আর একটি সমাধান যা আপনার পক্ষে কাজ করতে পারে তা হ'ল সম্পর্ককে বিপরীত করা। সুতরাং আপনি সমস্ত তালিকা আইটেমের জন্য সীমানা সেট করতে হবে। তারপরে আপনি প্রথম আইটেমটির সীমানা মুছে ফেলতে প্রথম-শিশু ব্যবহার করবেন। প্রথম-শিশুটি সমস্ত ব্রাউজারগুলিতে স্থিতিশীলভাবে সমর্থিত হয় (এর অর্থ এটি অন্য কোডের মাধ্যমে গতিময়ভাবে যুক্ত করা যায় না, তবে প্রথম-শিশুটি সিএসএস 2 নির্বাচনকারী, যেখানে শেষ শিশুটি সিএসএস 3 নির্দিষ্টকরণে যুক্ত হয়েছিল)
দ্রষ্টব্য: তালিকার 2 টি আইটেম যদি আপনার উদাহরণের মতো থাকে তবে এটি কেবলমাত্র আপনার ইচ্ছা মতো কাজ করে। যে কোনও তৃতীয় আইটেম এবং অন এগুলির জন্য সীমানা প্রয়োগ করা হবে।
আপনি যদি মনে করেন যে আপনি জাভাস্ক্রিপ্টটি ব্যবহার করতে পারেন, তবে যেহেতু jQuery সমর্থন last-child, আপনি jQuery এর সিএসএস পদ্ধতি এবং ভাল জিনিস এটি প্রায় সমস্ত ব্রাউজারগুলিকে সমর্থন করবে
উদাহরণ কোড:
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})আপনি এখানে সম্পর্কে আরও তথ্য পেতে পারেন: http://api.jquery.com/css/#css2
$("#nav li:last-child").addClass('last-child')করার জন্য আপনি নিজের স্টাইলশীটগুলিতে স্টাইলিং রাখতে পারেন better
div:last-childএবং এতে উভয়ই রয়েছে div.last-child। এটি প্রদর্শিত হয় যে এটি :last-childসিনট্যাক্সটিকে অবৈধ বলে বিবেচনা করে এবং সেই সিউডো-সিলেক্টর সহ কোনও শ্রেণি প্রয়োগ করা হবে না।
তালিকার আইটেমের সংখ্যা যদি স্থির থাকে তবে আপনি সংলগ্ন নির্বাচক ব্যবহার করতে পারেন, উদাহরণস্বরূপ যদি আপনার কেবল তিনটি <li>উপাদান থাকে তবে আপনি সর্বশেষটি নির্বাচন করতে পারেন <li>:
#nav li+li+li {
border-bottom: 1px solid #b5b5b5;
}li + #nav liএর পরে আসে তার liভিতরে নির্বাচন করে । আপনার নির্বাচকটি সহজভাবে হওয়া উচিত । #navli#nav li + li + li
আপনি যদি নিজেকে প্রায়শই সিএসএস 3 নির্বাচকদের চাইছেন বলে মনে করেন তবে আপনি সর্বদা আপনার সাইটে সেলিকটিভিজার লাইব্রেরি ব্যবহার করতে পারেন:
এটি একটি জেএস স্ক্রিপ্ট যা ব্রাউজারগুলিতে প্রায় সমস্ত CSS3 নির্বাচনকারীদের সমর্থন যোগ করে যা অন্যথায় তাদের সমর্থন করে না।
আইআই <head>শর্তসাপেক্ষে এটি আপনার ট্যাগে ফেলে দিন :
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->লাস্ট-চাইল্ড সিউডো ক্লাস আইই তে কাজ করে না
শ্রেণিটি ব্যবহারের বিকল্প হিসাবে আপনি একটি বিশদ তালিকা ব্যবহার করতে পারেন, সন্তানের ডিটি উপাদানগুলিকে একটি স্টাইলের জন্য সেট করতে এবং চাইল্ড ডিডি উপাদানগুলিকে অন্য একটিতে রাখতে পারেন। আপনার উদাহরণ হয়ে উঠবে:
#refundReasonMenu #nav li:dd
{
border-bottom: 1px solid #b5b5b5;
}এইচটিএমএল:
<div id="refundReasonMenu">
<dl id="nav">
<dt><a id="abc" href="#">abcde</a></dt>
<dd><a id="def" href="#">xyz</a></dd>
</dl>
</div>কোনও পদ্ধতিই অন্যটির চেয়ে ভাল নয় এবং এটি কেবল ব্যক্তিগত পছন্দ হিসাবে নেমে এসেছে।
কেন ইউএল এর নীচে সীমানা প্রয়োগ করবেন না?
#refundReasonMenu #nav ul
{
border-bottom: 1px solid #b5b5b5;
}padding-bottomউপর <ul>উপাদান বা margin-bottomগত উপর <li>উপাদান, এই অধিকার নীচে পছন্দসই বসানো গত থাকবে না <li>উপাদান। অন্যথায়, এটি একটি ভাল সমাধান।
যদি আপনি উপাদানগুলি ভাসমান হন তবে আপনি ক্রমটি বিপরীত করতে পারেন
অর্থাত্ float: right;পরিবর্তেfloat: left;
এবং তারপরে কোনও ক্লাসের প্রথম-শিশু নির্বাচন করতে এই পদ্ধতিটি ব্যবহার করুন।
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}এটি আসলে শেষ ইভেন্টে ক্লাসটি প্রয়োগ করছে কেবল কারণ এটি এখন বিপরীত ক্রমে।
এখানে আপনার জন্য একটি কার্যকারী উদাহরণ:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>আপনার বাকি সিএসএস না দেখে বলা শক্ত, তবে !importantএটির মতো করে তৈরি করার জন্য সীমানা রঙের সামনে যুক্ত করার চেষ্টা করুন :
#refundReasonMenu #nav li:last-child
{
border-bottom: 1px solid #b5b5b5 !important;
}
:last-child। এবং এটি যে কৌতূহল নয়। সিএসএস 2 সিউডো-ক্লাস:first-child,:last-childসিএসএস 3 সিউডো-ক্লাস।