উপাদানগুলির একটি সেটে প্রতিটি চতুর্থ উপাদান নির্বাচন করা, বলা সম্ভব?
প্রাক্তন: আমার 16 টি <div>উপাদান রয়েছে ... আমি এমন কিছু লিখতে পারি।
div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)
এই কাজ করতে একটি ভাল উপায় আছে কি?
উত্তর:
নামটি থেকে বোঝা যায়, আপনি ধ্রুবক সংখ্যার পাশাপাশি চলকটি ব্যবহার করে একটি গাণিতিক এক্সপ্রেশন তৈরি করতে পারবেন । আপনি সংযোজন ( ), বিয়োগ ( ) এবং গুণফল গুণ করতে পারেন ( যেখানে ইতিবাচক সংখ্যা, negativeণাত্মক সংখ্যা এবং শূন্য সহ একটি পূর্ণসংখ্যা যেখানে )।:nth-child()n+-ana
আপনি কিভাবে উপরের নির্বাচক তালিকাটি পুনরায় লিখবেন তা এখানে:
div:nth-child(4n)এই পাটিগণিতের এক্সপ্রেশনগুলি কীভাবে কাজ করে তার একটি ব্যাখ্যার জন্য, এই প্রশ্নের আমার উত্তরটি দেখুন , পাশাপাশি বিশদটিও দেখুন ।
নোট করুন যে এই উত্তরটি ধরে নিয়েছে যে একই পিতামন্ডলের মধ্যে থাকা সমস্ত শিশু উপাদান একই উপাদান ধরণের div,। আপনার যদি বিভিন্ন ধরণের যেমন h1বা এর মতো অন্য কোনও উপাদান থাকে তবে আপনি কেবলমাত্র উপাদান গণনা করে তা নিশ্চিত করার পরিবর্তে pআপনাকে ব্যবহার করতে হবে ::nth-of-type():nth-child()div
<body>
<h1></h1>
<div>1</div> <div>2</div>
<div>3</div> <div>4</div>
<h2></h2>
<div>5</div> <div>6</div>
<div>7</div> <div>8</div>
<h2></h2>
<div>9</div> <div>10</div>
<div>11</div> <div>12</div>
<h2></h2>
<div>13</div> <div>14</div>
<div>15</div> <div>16</div>
</body>
অন্য যে কোনও কিছুর জন্য (শ্রেণি, বৈশিষ্ট্য বা এগুলির কোনও সংমিশ্রণ), যেখানে আপনি নবম সন্তানের সন্ধান করছেন যা একটি স্বেচ্ছাসেবী নির্বাচকের সাথে মেলে, আপনি খাঁটি সিএসএস নির্বাচক দিয়ে এটি করতে সক্ষম হবেন না। এই প্রশ্নের আমার উত্তর দেখুন ।
যাইহোক, 4n এবং 4n + 4 এর সাথে অনেক পার্থক্য নেই :nth-child()। আপনি যদি nভেরিয়েবলটি ব্যবহার করেন তবে এটি 0 এ গণনা শুরু করে প্রতিটি নির্বাচক এটির সাথে মিলবে:
:nth-child(4n)
4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...
:nth-child(4n+4)
4(0) + 4 = 0 + 4 = 4
4(1) + 4 = 4 + 4 = 8
4(2) + 4 = 8 + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...
আপনি দেখতে পাচ্ছেন, উভয় নির্বাচকই উপরের মত একই উপাদানগুলির সাথে মিল পাবেন। এক্ষেত্রে কোনও পার্থক্য নেই।
tr td:nth-child(4)। বন্ধনীগুলির মধ্যে কোনও এন এর অভাব নোট করুন
div:nth-child(4n+4) nth-childসিউডো ক্লাসের জন্য আপনার সঠিক যুক্তি প্রয়োজন ।
যুক্তি আকারে থাকা উচিত an + bযে একটি খেলায় তম সন্তান খ থেকে শুরু।
উভয় aএবং boptionচ্ছিক পূর্ণসংখ্যা এবং উভয়ই শূন্য বা নেতিবাচক হতে পারে।
aশূন্য হয় তাহলে নেই "প্রত্যেক একটি তম শিশু" দফা।aনেতিবাচক হয় তবে ম্যাচটি শুরু থেকে পিছনের দিকে করা হয় b।bতারপর শূন্য বা ঋণাত্মক এটা সমতুল্য অভিব্যক্তি ইতিবাচক ব্যবহার লিখতে সম্ভব bযেমন 4n+0হিসাবে একই 4n+4। অনুরূপভাবে 4n-1হিসাবে একই 4n+3।উদাহরণ:
li:nth-child(4n) {
background: yellow;
}<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>