” عنصر، پھر ہم بچے کو پکڑ کر پیرنٹ عنصر کے اسٹائل کو ایڈجسٹ کر سکتے ہیں۔ اس مقصد کے لیے، ہم استعمال کر سکتے ہیں ' :has() 'سلیکٹر۔

دونوں '

' عناصر سے، ایک کو منتخب کریں جس میں '

' عنصر شامل ہو .class-name:has(بچے کا نام) ”:

.parent-div : ہے ( h1 ) {

پس منظر کا رنگ : #103e6d ;

رنگ : سیپ ;

چوڑائی : 150px ;

اونچائی : 150px ;

سرحدی رداس : پچاس٪ ;

متن سیدھ : مرکز ;

}

یہاں، ہم نے پیرنٹ عنصر پر درج ذیل CSS خصوصیات کو لاگو کیا ہے:

---

---

• ' پس منظر کا رنگ عنصر کے پس منظر کا رنگ بتانے کے لیے استعمال کیا جاتا ہے۔
• ' رنگ عنصر متن کا رنگ بتاتا ہے۔
• ' چوڑائی عنصر کی چوڑائی کی وضاحت کے لیے استعمال کیا جاتا ہے۔
• ' اونچائی ' عنصر کی اونچائی کی وضاحت کرتا ہے۔
• ' سرحدی رداس عنصر کے گول کونوں کو سیٹ کرنے کے لیے پراپرٹی کا استعمال کیا جاتا ہے۔
• ' متن سیدھ ' متن کی سیدھ کی وضاحت کرتا ہے۔

آؤٹ پٹ

تمام چائلڈ عناصر کو کیسے منتخب کریں؟

پیرنٹ سلیکٹر کی مدد سے چائلڈ عنصر کو منتخب کرنے کے لیے، دی گئی مثال کو دیکھیں۔

مثال

HTML صفحہ بنانے کے لیے درج ذیل اقدامات پر عمل کریں:

• ایک div عنصر شامل کریں جس میں دو '

  'ٹیگ اور ایک'

  'کلاس رکھنے والا ٹیگ' بچہ-تقسیم '
• بچے ' div ' عنصر میں ایک '

  ' عنصر شامل ہے:

< div کلاس = 'والدین-تقسیم' >

< ص > ہیلو < / ص >

< ص > دنیا < / ص >

< div کلاس = 'چائلڈ ڈیو' >

< ص > میں بچہ ہوں < / ص >

< / div >

< / div >

ہم والدین کے ذریعے بچوں کے عناصر کو منتخب کر سکتے ہیں '

'کلاس. یہ نہ صرف اس کا براہ راست انتخاب کرے گا۔ ص ' عناصر بلکہ نیسٹڈ کو بھی منتخب کرتا ہے ' ص ' عناصر:

.parent-div ص {

پس منظر کا رنگ : #7F167F ;

فونٹ فیملی : لعنت کرنے والا ;

حرف کا سائز : 25px ;

متن سیدھ : مرکز ;

رنگ : سفید دھواں ;

}

آؤٹ پٹ

بچوں کے تمام براہ راست عناصر کا انتخاب کیسے کریں؟

والدین div کے براہ راست بچے کو منتخب کرنے کے لئے، ہم استعمال کر سکتے ہیں ' > 'علامت۔ اس سے ان تمام 'p' عناصر کو منتخب کرنے میں مدد ملے گی جو والدین کے براہ راست بچے ہیں۔

' مثال کے طور پر، ہم نے درج ذیل CSS خصوصیات کو لاگو کیا ہے:

.parent-div > ص {

پس منظر کا رنگ : #7F167F ;

فونٹ فیملی : لعنت کرنے والا ;

حرف کا سائز : 30px ;

متن سیدھ : مرکز ;

رنگ : سفید دھواں ;

}

' فونٹ فیملی 'منتخب عنصر کے فونٹ کی وضاحت کرتا ہے اور' حرف کا سائز فونٹ کے سائز کی وضاحت کے لیے استعمال کیا جاتا ہے:

آؤٹ پٹ

ہم نے HTML اور CSS میں CSS پیرنٹ سلیکٹرز کے بارے میں بات کی ہے۔

نتیجہ

سی ایس ایس میں، ' :has() ” سلیکٹر کو پیرنٹ سلیکٹر سیوڈو کلاس کے طور پر استعمال کیا جاتا ہے۔ یہ خاص طور پر پیرنٹ عناصر کو منتخب کرنے کے لیے استعمال ہوتا ہے۔ مثال کے طور پر، ' .parent-div:has(h1) پیرنٹ عنصر کو منتخب کرتا ہے جس میں '

' عناصر. والدین کے عنصر کے چائلڈ عنصر کو منتخب کرنے کے لیے، استعمال کریں ' .parent-div p ' حالت کا بیان تمام براہ راست چائلڈ عناصر کو منتخب کرنے کے لیے بھی استعمال کیا جا سکتا ہے۔ اس مضمون میں CSS پیرنٹ سلیکٹر کی مثالوں کے ساتھ وضاحت کی گئی ہے۔