CSS :nth-child() নির্বাচক বোঝা

CSS :nth-child() নির্বাচক বোঝা
আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

সমস্ত CSS নির্বাচকদের মত, আপনি :nth-child() ব্যবহার করতে পারেন একটি ওয়েবপৃষ্ঠার উপাদানগুলি সনাক্ত করতে এবং সেগুলিতে শৈলী প্রয়োগ করতে। কিন্তু এই নির্বাচক আপনাকে তাদের আপেক্ষিক অবস্থানের উপর ভিত্তি করে ভাইবোনের একটি সেটকে সংকুচিত করতে দেয়।





দিনের MUO ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

নির্বাচক সাধারণ ক্ষেত্রে কিছু মৌলিক কীওয়ার্ড সমর্থন করে, কিন্তু এটি একটি শক্তিশালী প্যাটার্ন-মেলা সিনট্যাক্সও প্রদান করে। এটি ব্যবহার করে, আপনি আপনার প্রয়োজনের উপর ভিত্তি করে নিয়মিত, পুনরাবৃত্তিমূলক নিদর্শন বা আরও জটিল সংজ্ঞাগুলির উপর ভিত্তি করে উপাদান নির্বাচন করতে পারেন।



:nth-child() নির্বাচক সিনট্যাক্স

হিসেবে CSS সিউডো-ক্লাস নির্বাচক , :nth-child() সিনট্যাক্স অন্যান্য নির্বাচকদের থেকে আলাদা। এটি ভাইবোনের একটি সেটে উপাদানগুলিকে মেলানোর জন্য একটি প্যাটার্ন হিসাবে একটি যুক্তি নেয়:





 :nth-child(args) { 
    /*...*/ 
}

মূল ফোকাস বন্ধনীর আর্গুমেন্টের উপর। এই আর্গুমেন্ট নির্বাচন করার জন্য উপাদানের উপসেট সংজ্ঞায়িত করে।

পুরানো পিসি দিয়ে কি করবেন

সাধারণ ক্ষেত্রের জন্য কীওয়ার্ড মান ব্যবহার করা

এই নির্বাচক দুটি কীওয়ার্ড মান মিটমাট করতে পারে: অস্বাভাবিক এবং এমন কি . তারা জন্য বিশেষভাবে দরকারী একটি টেবিলে বিকল্প সারি স্টাইলিং .



আপনি যখন এই কীওয়ার্ড মানগুলি ব্যবহার করতে পারেন তখন একটি সাধারণ অর্ডার করা তালিকা হল আরেকটি ভাল উদাহরণ:

 <ol> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
</ol>

ব্যবহার করে :নম-শিশু (বিজোড়) নির্বাচক, আপনি প্রতিটি বিকল্প আইটেমের রঙ পরিবর্তন করতে পারেন:



 :nth-child(odd) { 
    color: red; 
}

আইটেমগুলি সূচী 1 থেকে শুরু হয়, তাই প্রথম আইটেমটি লাল দেখাবে, তারপরে তৃতীয়টি এবং আরও অনেক কিছু:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। এক, তিন, পাঁচ এবং সাত পজিশনের আইটেমগুলি লাল।

আরও নমনীয়তার জন্য কার্যকরী স্বরলিপি

আপনি একটি পৃথক উপাদান নির্বাচন করতে একটি একক পূর্ণসংখ্যা ব্যবহার করতে পারেন, যেমন:



 li:nth-child(4) { 
    color: red; 
}

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

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। পজিশন চারের আইটেমটি লাল।

এই সিনট্যাক্সটি আরও সাধারণ কার্যকরী সিনট্যাক্সের একটি বিশেষ ক্ষেত্রে যা একটি প্রদত্ত প্যাটার্নের সাথে মেলে এমন আইটেমগুলি নির্বাচন করে। এই সিনট্যাক্স হল:

সংযুক্ত ডিভাইস কিস 3 দ্বারা সমর্থিত নয় 
 :nth-child(An+B) { 
    /*...*/ 
}

এই স্বরলিপিতে, ক ধাপ আকার হয়. এর অর্থ হল পরবর্তী আইটেমটি নির্বাচন করতে নির্বাচক কতবার সরেছেন। এটি আপনাকে প্রতিটি অন্য আইটেম, প্রতি তৃতীয় আইটেম, ইত্যাদি নির্বাচন করতে দেয়। খ শুরুর বিন্দু যেখানে নির্বাচন শুরু হয়।

উদাহরণস্বরূপ, আর্গুমেন্ট 3n+1 নিন:

 li:nth-child(3n+1) { 
    color: red; 
}

এটি প্রথম আইটেম থেকে নির্বাচন শুরু করবে এবং তারপরে প্রতিটি তৃতীয় আইটেমের সাথে চালিয়ে যাবে:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। এক, চার এবং সাত পজিশনের আইটেমগুলি লাল।

3n+2 অভিব্যক্তির সাথে এটি তুলনা করুন:

 li:nth-child(3n+2) { 
    color:red; 
}

এটি এখনও প্রতিটি তৃতীয় আইটেম নির্বাচন করে, কিন্তু এখন এটি তালিকার দ্বিতীয় আইটেম থেকে শুরু হয়:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। পজিশন দুই, এবং পাঁচটি আইটেম লাল।

আরেকটি আকর্ষণীয় উদাহরণ হল :nth-child(n+3):

 li:nth-child(n+3) { 
    color: red; 
}

এটি তৃতীয় (+3) থেকে শুরু করে প্রতিটি আইটেম (n) নির্বাচন করবে। এটি এই মত দেখাবে:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। তিন থেকে সাত পজিশনের আইটেমগুলো লাল।

আপনি নির্দিষ্ট ফলাফল অর্জন করতে বিয়োগ ব্যবহার করতে পারেন:

 li:nth-child(3n-1) { 
    color: red; 
}

এই উদাহরণটি এখনও প্রতিটি তৃতীয় আইটেম নির্বাচন করে, তবে এটি 'প্রথম বিয়োগ' থেকে শুরু হয়। কার্যত, এর মানে হল যে এটি তালিকার দ্বিতীয় আইটেমটি নির্বাচন করবে, তারপর পঞ্চমটি এবং আরও অনেক কিছু:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। পজিশন দুই এবং পাঁচের আইটেম লাল।

<নির্বাচক> সিনট্যাক্সের

আপনি কীওয়ার্ডটিও ব্যবহার করতে পারেন এর একটি দ্বারা অনুসরণ করা নির্বাচক একটি যুক্তি হিসাবে :nth-child() নির্বাচক। এই সিনট্যাক্স আপনাকে সম্ভাব্য আইটেমগুলিকে সংকুচিত করতে দেয় যা নিয়মিত প্যাটার্ন থেকে নির্বাচন করে।

উদাহরণস্বরূপ, কল্পনা করুন আপনার মার্কআপটি আসলটির চেয়ে আরও জটিল:

কিভাবে আপনার মাদারবোর্ড বের করবেন 
 <ol> 
    <li class="old">Item 1</li> 
    <li class="new">Item 2</li> 
    <li class="new">Item 3</li> 
    <li class="old">Item 4</li> 
    <li class="new">Item 5</li> 
    <li class="new">Item 6</li> 
    <li class="new">Item 7</li> 
</ol>

এখন, একটি নির্দিষ্ট ক্লাসের সেট থেকে জোড় আইটেম নির্বাচন করতে :nth-child ব্যবহার করুন:

 .new { 
    font-weight: bold; 
} 
 
li:nth-child(even of.new) { 
    color: red; 
}

লক্ষ্য করুন কিভাবে শুধুমাত্র সম-সংখ্যার গাঢ় আইটেমগুলি লাল হয়:

সাতটি আইটেম দেখানো একটি সংখ্যাযুক্ত তালিকা। পজিশন তিন এবং ছয় আইটেম লাল হয়.

এছাড়াও বিবেচনা করুন কিভাবে এটি থেকে পৃথক li.new:nth-child(এমনকি) যা লক্ষ্য .নতুন উপাদান, কিন্তু শুধুমাত্র যদি তারা সমান হয়. এটি উপরের উদাহরণে আইটেম 2 এবং 6 হবে।

:nth-child() নির্বাচকের সাথে কাজ করা

আপনি :nth-child() নির্বাচক ব্যবহার করে অনন্য ডিজাইন অর্জন করতে পারেন। আপনি রঙিন ওয়েবসাইট তৈরি করতে পারেন এবং ডেটা টেবিলে সারি এবং কলাম হাইলাইট করতে পারেন। অন্যান্য CSS নির্বাচকদের সাথে এটি একত্রিত করা আপনাকে জটিল লেআউট এবং ডিজাইন তৈরি করতে সাহায্য করবে।