اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ پندرواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا پندرواں لیکچر ۔CSS اسپیسیفیسٹی اور سلیکٹرز ۔ لیکچر 15
اسپیسیفیسٹی کیا ہے؟
اسپیسیفیسٹی وہ الگورتھم ہے جسے براؤزر یہ فیصلہ کرنے کے لیے استعمال کرتے ہیں کہ کون سی CSS پراپرٹی کی قدریں کسی عنصر پر سب سے زیادہ متعلقہ ہیں۔
<style>
/* عنصر سلیکٹر - اسپیسیفیسٹی: 1 */
p {
color: blue;
}
/* کلاس سلیکٹر - اسپیسیفیسٹی: 10 */
.my-paragraph {
color: green;
}
/* آئی ڈی سلیکٹر - اسپیسیفیسٹی: 100 */
#my-id {
color: red;
}
</style>html پیج میں کوڈنگ کے دوران body سیکشن میں ہم اسے یوں لکھیں گے
<p class="my-paragraph" id="my-id" style="color: pink;">اس پیراگراف کا رنگ کیا ہوگا؟</p>
<p>اس کا رنگ گلابی ہوگا کیونکہ ان لائن اسٹائل کی اسپیسیفیسٹی سب سے زیادہ ہوتی ہے۔</p>
جدید CSS سلیکٹرز
جدید CSS سلیکٹرز کے بارے میں جانیں۔ وصف سلیکٹرز، سیوڈو عناصر (::before, ::after)، اور کمبینیٹرز (>, +, ~) کا
<style>
/* وصف سلیکٹر */
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
}
/* سیوڈو عنصر ::before */
h2::before {
content: "หัวข้อ: ";
color: blue;
}
/* ملحقہ بہن بھائی کمبینیٹر */
div + p {
background-color: yellow;
}
/* عمومی بہن بھائی کمبینیٹر */
div ~ p {
font-style: italic;
}
</style>html پیج میں کوڈنگ کے دوران body سیکشن میں ہم اسے یوں لکھیں گے
<input type="text" placeholder="نام">
<input type="password" placeholder="پاس ورڈ">
<h2>یہ ایک ہیڈنگ ہے</h2>
<div>یہ ایک ڈیو ہے۔</div>
<p>یہ ڈیو کے بعد پہلا پیراگراف ہے۔</p>
<p>یہ دوسرا پیراگراف ہے۔</p>