একটি সিউডো-ক্লাস (একক কোলন :) উপাদানগুলিকে তাদের অবস্থা বা অবস্থান এর ভিত্তিতে নির্বাচন করে — এমন কিছু যা সাধারণ ক্লাস দ্বারা প্রকাশযোগ্য নয়, যেমন "হোভার করার সময়" বা "প্রথম সন্তান।"
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
লিঙ্কগুলির জন্য ক্রম গুরুত্বপূর্ণ (LVHA): :link, :visited, :hover, :active।
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() শক্তিশালী — 2n (জোড়), 2n+1 (বিজোড়), 3n (প্রতি তৃতীয়), ইত্যাদি।
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
সিউডো-ক্লাসগুলি একটি কোলন ব্যবহার করে (:hover, একটি অবস্থা); সিউডো-উপাদানগুলি দুটি ব্যবহার করে (::before, একটি উত্পন্ন অংশ)। সেগুলিকে বিভ্রান্ত করবেন না।
সিউডো-ক্লাসগুলি আপনাকে ইন্টারঅ্যাকশন স্টাইল করতে (হোভার/ফোকাস — ব্যবহারযোগ্য, অ্যাক্সেসযোগ্য ইউআই এর জন্য অপরিহার্য) এবং কাঠামো (স্ট্রাইপিং, প্রথম/শেষ) অতিরিক্ত মার্কআপ বা JavaScript ছাড়াই সুযোগ দেয়।
আধুনিকগুলি (:has, :is, :focus-visible) এমন সমস্যাগুলি সমাধান করে যা পূর্বে JavaScript বা পুনরাবৃত্তিমূলক নির্বাচক প্রয়োজন ছিল।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন