CSS Selectors ( سي ايس ايس سليڪٽر) Web Development Course Class 15
CSS سليڪٽرز ويب پيج تي HTML عنصرن (elements) کي چونڊڻ ۽ انهن کي اسٽائل ڏيڻ لاءِ استعمال ٿيندا آهن. هيٺ اهم سليڪٽرن جي وضاحت ۽ انهن جا استعمال ڏنل آهن.
- Element Selector (عنصر سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر مخصوص HTML عنصرن کي چونڊي ٿو ۽ انهن تي انداز (style) لاڳو ڪري ٿو.
• اهو عنصر جو نالو استعمال ڪندي لکجي ٿو.
استعمال:
• جيڪڏهن اسان سڀني ٽيگن کي نيرو رنگ ڏيڻو آهي، ته هيئن لکنداسين:
p {
color: blue;
}
هيءَ پيراگراف نيرو ٿيندو.
ٻيو پيراگراف به نيرو ٿيندو.
- Class Selector (. – ڪلاس سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر انهن سڀني عنصرن تي انداز لاڳو ڪري ٿو جن کي ساڳي ڪلاس ڏنل هجي.
• ڪلاس جو نالو اڳيان . (ڊاٽ) لڳائي لکبو آهي.
استعمال:
• هيٺ ڏنل مثال ۾، “highlight” نالي ڪلاس سان سڀني عنصرن جو رنگ ڳاڙهو ٿيندو:
.highlight {
color: red;
}
هيءَ لائن ڳاڙهي ٿيندي.
ٻي به ڳاڙهي ٿيندي.
- ID Selector (# – آئي ڊي سليڪٽر) Web Development Course Class 15
وضاحت:
• ID سليڪٽر هڪ منفرد (unique) عنصر کي چونڊي ٿو ۽ ان تي انداز لاڳو ڪري ٿو.
• هر ويب پيج تي هڪ ئي ID هجڻ گهرجي.
• ID لکڻ وقت اڳيان # (هاش) جو نشان لڳندو آهي.
استعمال:
• هيٺ ڏنل مثال ۾، صرف هڪ h1 عنوان کي خاص انداز ڏنو ويو آهي:
main-title {
font-size: 30px;
color: green;}
هي خاص عنوان آهي.
- Universal Selector (* – يونيورسل سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر سڀني عنصرن تي انداز لاڳو ڪندو آهي.
• جيڪڏهن ويب سائيٽ جي سڀني عنصرن تي هڪ جهڙو انداز لڳائڻو هجي، ته هن سليڪٽر کي استعمال ڪري سگهجي ٿو.
استعمال:
- {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
هي ويب سائيٽ جي سڀني عنصرن تي اثر ڪندو.
هي به متاثر ٿيندو.
- Group Selector (A, B, C – گروپ سليڪٽر)
وضاحت:
• هي سليڪٽر ڪيترن ئي عنصرن کي هڪ ئي انداز سان بڻائڻ لاءِ استعمال ٿيندو آهي.
• ڪيترائي عنصر , (ڪاما) سان جدا ڪري لکبا آهن.
استعمال:
h1, h2, p {
color: blue;
}
هيءَ سرخي نيري ٿيندي.
هيءَ سب سرخي به نيري ٿيندي.
هي پيراگراف به نيرو ٿيندو.
- Descendant Selector (A B – اولاد سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر هڪ خاص عنصر جي اندر موجود ٻين عنصرن تي انداز لاڳو ڪندو.
• جيڪڏهن ڪنهن مخصوص div يا section اندر موجود عنصرن کي اسٽائل ڏيڻ چاهيون ته هن سليڪٽر کي استعمال ڪري سگهجي ٿو.
استعمال:
div p {
color: purple;
}
هي پيراگراف واڱڻائي رنگ ۾ هوندو.
پر هي ٻاهر هجڻ ڪري متاثر نه ٿيندو.
- Child Selector (A > B – سڌو اولاد سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر فقط سڌي اولاد (direct child) عنصرن تي انداز لاڳو ڪري ٿو.
• جيڪڏهن ڪنهن عنصر جو اندروني عنصر ٻيو به nested (گهڙيل) هجي، ته اهو متاثر نه ٿيندو.
استعمال:
div > p {
color: orange;
}
هي پيراگراف نارنگي ٿيندو.
هي پيراگراف نارنگي نه ٿيندو، ڇو ته اهو سڌو اولاد نه آهي.
- Adjacent Sibling Selector (A + B – لڳو لڳ ڀاءُ سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر ڪنهن خاص عنصر کان پوءِ ايندڙ ڀاءُ عنصر تي انداز لاڳو ڪندو.
استعمال:
h1 + p {
color: brown;
}
هي عنوان آهي.
هي عنوان کان فوراً پوءِ اچڻ سبب ناسي ٿيندو.
پر هي عام رهندو.
- General Sibling Selector (A ~ B – عام ڀاءُ سليڪٽر) Web Development Course Class 15
وضاحت:
• هي سليڪٽر ڪنهن خاص عنصر کان پوءِ ايندڙ سڀني ڀاءُ عنصرن تي انداز لاڳو ڪندو.
استعمال:
h1 ~ p {
color: pink;
}
هي عنوان آهي.
هي عنوان کان پوءِ اچڻ سبب گلابي ٿيندو.
هي به گلابي ٿيندو.
نتيجو: Web Development Course Class 15
هن سبق ۾ اسان CSS جي بنيادي سليڪٽرن کي سمجهيو. انهن سليڪٽرن کي صحيح طريقي سان استعمال ڪرڻ سان اسان ويب سائيٽ کي بهتر طريقي سان ڊزائين ڪري سگهون ٿا.
عام صلاحيتون:
✅ Element سليڪٽر: سڀني هڪجهڙن عنصرن لاءِ.
✅ Class سليڪٽر: ڪيترن عنصرن لاءِ ساڳيو انداز.
✅ ID سليڪٽر: فقط هڪ منفرد عنصر لاءِ.
✅ Universal سليڪٽر: سڀني عنصرن تي اثر.
✅ Group سليڪٽر: مختلف عنصرن کي گڏ اسٽائل ڏيڻ.
✅ Descendant سليڪٽر: مخصوص عنصرن جي اندر موجود ٻين عنصرن تي اثر.
✅ Child سليڪٽر: فقط سڌي اولاد عنصرن تي اثر.
✅ Adjacent ۽ General Sibling سليڪٽر: ڀاءُ عنصرن کي اسٽائل ڏيڻ.
شاگردن لاءِ مشق:
• پنهنجي ويب پيج تي مختلف سليڪٽرن جو استعمال ڪري ڏسو.
• class ۽ id جو فرق عملي طور آزمائي ڏسو.
• CSS جي مدد سان پنهنجي ويب پيج کي رنگين بڻايو! 🎨
📌 Extra Tips for Beginners (بنيادي شاگردن لاءِ اضافي نقطا)
🔹 1. Class vs. ID – What’s the Difference?
✅ Class (.) is used for multiple elements.
✅ ID (#) is used for only one unique element.
✅ One element can have multiple classes but only one ID.
🔹 Sindhi:
• ڪلاس (Class) ڪيترن ئي عنصرن تي لڳي سگهي ٿو.
• آئي ڊي (ID) صرف هڪ منفرد عنصر لاءِ هوندو آهي.
• هڪ عنصر وٽ ڪيترائي ڪلاس ٿي سگهن ٿا، پر هڪ ئي ID هوندو.
🔹 2. Can We Use Class and ID Together?
✅ Yes! You can use both class and id in the same element.
html
CopyEdit
This is my special heading.
🔹 Sindhi:
✅ ها! توهان هڪ ئي عنصر تي ڪلاس ۽ آئي ڊي گڏ استعمال ڪري سگهو ٿا.
🔹 3. Always Use Meaningful Names
🚀 Good Practice:
css
CopyEdit
.button-primary {
background-color: blue;
}
🚫 Bad Practice:
css
CopyEdit
.abc {
background-color: blue;
}
🔹 Sindhi:
✔ هميشه سٺو نالو چونڊيو، جيئن .button-primary بجاءِ .abc لکڻ صحيح ناهي.
🔹 4. Use External CSS for Better Organization
✅ Instead of writing CSS inside HTML (
Welcome to Internal CSS
This is an example of styling with Internal CSS.
🎯 CSS Properties (سي ايس ايس جون خاصيتون)
CSS properties define how HTML elements look on a webpage.
📌 Basic CSS Properties with Examples
1️⃣ Color (رنگ ڏيڻ)
✅ Changes the text color.
css
CopyEdit
p {
color: red;
}
🔹 Sindhi:
color پراپرٽي ٽيڪسٽ جو رنگ تبديل ڪرڻ لاءِ استعمال ٿيندي آهي.
2️⃣ Background-Color (پٺتي جو رنگ ڏيڻ)
✅ Changes the background color of an element.
css
CopyEdit
body {
background-color: yellow;
}
🔹 Sindhi:
background-color پراپرٽي ڪنهن به عنصر جي پٺتي جو رنگ تبديل ڪرڻ لاءِ استعمال ٿيندي آهي.
3️⃣ Font-Size (لکت جو قد)
✅ Changes the text size.
css
CopyEdit
h1 {
font-size: 30px;
}
🔹 Sindhi:
font-size پراپرٽي لکت جو قد تبديل ڪرڻ لاءِ استعمال ٿيندي آهي.
4️⃣ Text-Align (لکت کي ترتيب ڏيڻ)
✅ Aligns text to left, right, center, or justify.
css
CopyEdit
p {
text-align: center;
}
🔹 Sindhi:
text-align پراپرٽي لکت کي کاٻي، ساڄي، مرڪز يا جيسٽيفاءِ ترتيب ڏيڻ لاءِ استعمال ٿيندي آهي.
5️⃣ Margin (باهرين وٿي ڏيڻ)
✅ Creates space around an element.
css
CopyEdit
div {
margin: 20px;
}
🔹 Sindhi:
margin پراپرٽي عنصر جي چوڌاري وٿي ڏيڻ لاءِ استعمال ٿيندي آهي.
Web Development Course Class 15
6️⃣ Padding (اندروني وٿي ڏيڻ)
✅ Creates space inside an element, between its content and border.
css
CopyEdit
div {
padding: 10px;
}
🔹 Sindhi:
padding پراپرٽي ڪنهن عنصر جي اندر وٿي ڏيڻ لاءِ استعمال ٿيندي آهي.
Web Development Course Class 15
💡 Extra Tips for Beginners (بنيادي شاگردن لاءِ اضافي ٽپس)
✅ Use Internal CSS for Small Projects – If your webpage is simple, internal CSS is fine. For larger projects, use external CSS.
✅ Be Organized – Write CSS neatly inside the
