🧙‍♂️ CSS Selectors කියන මැජික් එක – දෙවෙනි පෝස්ටුව ✨🎯

ඔයාලට CSS කියන විදිහ තේරුනා. දැන් හිතන්න, HTML එකේ තියෙන තියෙන ගොඩක් elements වලට style එකක් apply කරන්න ඕනේ කියලා. ඒක තමයි Selectors වල වැඩ. Selectors කියන්නේ "මෙයාට තමා style එක දාන්න ඕනෙ!" කියන indication එක. 👈🎯

🏷️ 1. Element Selector – සාමාන්‍යවම පාවිච්චි වෙන එක

p {
  color: red;
}

➡️ මේකෙන් HTML එකේ තියෙන හැම <p> tag එකටම රතු පාට යාවි ❤️

👉 සරලම Selector එකක්!

#️⃣ 2. ID Selector – තනි එකකට

#main-heading {
  font-size: 30px;
  color: green;
}

➡️ HTML එකේ:

<h1 id="main-heading">Welcome!</h1>

🔎 මෙකෙදි # mark එකෙන් id එක select කරනවා.

එකම object එකකට style එකක් දාන්න හොඳයි 💚

🧑‍🤝‍🧑 3. Class Selector – ගොඩක් එකට එක්කම

.note {
  background-color: yellow;
  padding: 10px;
}

➡️ HTML එකේ:

<p class="note">මෙයා Note එකක් 📝</p>
<p class="note">මෙත් Note එකක් 😄</p>

👉 . mark එකෙන් class select කරනවා.

බොහෝ elements එකටම use කරන්න පුළුවන් 💛

🌟 4. Universal Selector – හැම එකටම

* {
  margin: 0;
  padding: 0;
}

🔧 මෙකෙන් HTML එකේ තියෙන හැම tag එකකටම effect වෙනවා. Useful wenne reset karanna.

🎯 5. Grouping Selectors – එක වරම

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

➡️ මේකෙන් h1, h2, h3 එකටම එක style එකක් apply වෙනවා.

💡 සරලයි, clean එකයි!

🔥 BONUS – Pseudo-class Selector

a:hover {
  color: orange;
}

➡️ මේකෙන් <a> tag එකකට mouse එක ගියොත් orange color වෙනවා 🟠

🧠 Hover effect එකක්!

📘 Summary එක:

Selector Type | Syntax | Example

• Element | tag | p, h1
• ID | #id | #header
• Class | .class | .box, .red
• Universal | * | *
• Grouped | a, p, h1 | a, h2
• Pseudo-class | :hover | a:hover

🫱 අන්තිමට කියන්න තියෙන්නෙ:

Selectors කියන්නෙ CSS එකේ backbone එක. මේක හොඳට අඳින්න. ඔය Selectors හොඳට අමතක නෙවෙන්න, ඔයාට තියෙන HTML එක experiment කරලා බලන්න! 👨‍💻👩‍💻

ඊලඟ පෝස්ටුවේ අපි බලමු CSS Box Model කියන ලෝකෙ! 📦🔍