🔖 সিলেক্টর (Selectors)

CSS সিলেক্টরের মূল কাজ হলো HTML পেজ থেকে নির্দিষ্ট কোনো এলিমেন্টকে খুঁজে বের করা, যাতে আমরা সেটিতে ডিজাইন অ্যাপ্লাই করতে পারি।

📌 বেসিক সিলেক্টরস (Basic Selectors)

সবচেয়ে বেশি ব্যবহৃত ৩ ধরনের সিলেক্টর হলো:

p {
  color: blue;
}

.btn-primary {
  background-color: green;
}

#main-header {
  font-size: 30px;
}

📌 অ্যাডভান্সড সিলেক্টরস (Advanced Selectors)

কখনো কখনো শুধু ক্লাস বা আইডি দিয়ে কাজ হয় না, তখন আমাদের অ্যাডভান্সড সিলেক্টর লাগে।

১. Child Selector (>): শুধুমাত্র সরাসরি সন্তান (direct child) কে সিলেক্ট করে।

ul > li {
  list-style: square;
}

২. Descendant Selector ( Space): যেকোনো স্তরের সন্তানকে সিলেক্ট করে।

div p {
  color: red; /* div এর ভেতরে থাকা সব p লাল হবে */
}

৩. Pseudo-classes (:): এলিমেন্টের নির্দিষ্ট অবস্থা বা স্টেট সিলেক্ট করে।

a:hover {
  color: orange; /* মাউস নিলে কমলা হবে */
}
input:focus {
  border: 2px solid blue; /* ইনপুটে ক্লিক করলে বর্ডার নীল হবে */
}

📌 🥷 নিঞ্জা টেকনিক: Specificity (স্পেসিফিসিটি) যুদ্ধ!

অনেক সময় আপনি CSS এ একটি কালার দিচ্ছেন, কিন্তু সেটি কাজ করছে না! এর কারণ হলো Specificity বা কার ক্ষমতা বেশি।

কার ক্ষমতা কত? (কম থেকে বেশি)

1. Tag Selector (h1): ১ পয়েন্ট
2. Class Selector (.title): ১০ পয়েন্ট
3. ID Selector (#header): ১০০ পয়েন্ট
4. Inline Style (style=""): ১০০০ পয়েন্ট
5. !important: অসীম ক্ষমতা! 👑

/* উদাহরণ */
h1 { color: black; }            /* ১ পয়েন্ট */
.title { color: blue; }         /* ১০ পয়েন্ট (এটি জিতবে) */
#header { color: green; }       /* ১০০ পয়েন্ট (এটি জিতবে) */