সিলেক্টররা লক্ষ্য করে কোন উপাদানগুলিতে একটি নিয়ম প্রযোজ্য। এগুলি সাধারণ (ট্যাগ দ্বারা) থেকে শক্তিশালী (কম্বিনেটররা) পর্যন্ত বিস্তৃত।
/* Basic selectors */
p { } /* type: all <p> */
.card { }
{ }
* { }
{ }
.menu li { } /* descendant: any li INSIDE .menu (any depth) */
.menu > li { } /* child: only DIRECT children li */
h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */
h2 ~ p { } /* general sibling: all p siblings after an h2 */
স্পেস (ডিসেন্ডেন্ট) এবং > (সরাসরি চাইল্ড) এর মধ্যে পার্থক্য গুরুত্বপূর্ণ: .menu li গভীরভাবে নেস্টেড liগুলিও ম্যাচ করে, যখন .menu > li শুধুমাত্র শীর্ষ স্তরটি ম্যাচ করে।
a:hover { } /* state: while hovered */
li:first-child { } /* structural: the first li */
li:nth-child(2n){ } /* every even li */
p::first-line { } /* pseudo-element: the first rendered line */
h1, h2, h3 { } /* apply to all three */
:is(h1, h2) a { } /* :is() shortens long selector lists */
.card:has(img) { } /* :has() — a parent that CONTAINS an img */
সিলেক্টররা হল কীভাবে আপনি স্টাইলগুলিকে মার্কআপের সাথে সংযুক্ত করেন।
ক্লাসগুলি (কর্মী), কম্বিনেটররা (সম্পর্কের জন্য), এবং কাঠামোগত/অবস্থা সুডো-ক্লাসগুলিতে দক্ষতা অর্জন করা আপনাকে প্রতিটি জায়গায় অতিরিক্ত ক্লাস যোগ না করে নির্ভুলভাবে লক্ষ্য করতে দেয় — এবং আধুনিক :is()/:has() জটিল লক্ষ্যকে সংক্ষিপ্ত করে তোলে।
নির্দিষ্টতা পরিচালনাযোগ্য রাখতে আইডি/ভারী নেস্টিংয়ের চেয়ে ক্লাসকে অগ্রাধিকার দিন।