مقدار مخصوص سی ایس ایس شیلیوں اور لے آؤٹ بنائیں

Sep 17, 2025
کيسے

اس ٹیوٹوریل میں ہم عناصر کے سی ایس ایس شیلیوں کو تبدیل کرنے کے طریقوں پر نظر ڈالیں گے، ساتھ ساتھ عناصر کی تعداد پر منحصر ہے، ان کے والدین کو بظاہر لگ رہا ہے. ہم یہ بھی دیکھیں گے کہ ان کی مقدار پر مبنی عناصر کی ترتیب کو کس طرح تبدیل کرنے کے لۓ، مزید انکولی بنانے کے لئے ویب سائٹ کی ترتیب یہ خلا کا بہتر استعمال کرتا ہے.

  • سی ایس ایس ٹیکنیکس آپ کی ویب ترتیب میں انقلاب کرنے کے لئے

آخر میں ہم سی ایس ایس کاؤنٹر کے استعمال کو اس کے اندر اندر ایک سیٹ کے اندر اندر ایک عنصر کے انڈیکس کو ظاہر کرنے کے لئے استعمال کریں گے، ساتھ ساتھ والدین کے اندر کل شمار کی نمائش. یہ سب صرف خالص سی ایس ایس کے ساتھ حاصل کی جائے گی، صرف جاوا اسکرپٹ یا فریم ورک کی ضرورت کے بغیر، سادہ اور زیادہ موثر کوڈ کی وجہ سے.

لامتناہی کوڈ کی ضرورت کے بغیر سائٹ کی تعمیر کرنے کے لئے، آپ کو ایک کی ضرورت ہوگی ویب سائٹ بلڈر . اور جو بھی آپ کی سائٹ کی صلاحیتیں آپ کو یقینی بنائیں ویب میزبانی سروس مقصد کے لئے موزوں ہے. کچھ مختلف کے لئے، آپ کو حاصل کریں کلاؤڈ اسٹوریج خرگوش تک.

سنگل عنصر منتخب کنندہ

CSS3 صرف ایک ہی جوڑی منتخب کرتا ہے جو عناصر کی مقدار کا تعین کرسکتا ہے، یعنی: صرف بچے اور: صرف قسم کے انتخاب کاروں. اس نے کہا کہ، وہ واقعی یہ صرف اس بات کا تعین کرنے کے قابل ہیں کہ آیا عنصر اس کے اپنے یا بھائیوں پر ہے. : صرف چائلڈ انتخاب کنندہ عناصر سے ملتا ہے جو ان کے والدین کا واحد بچہ ہے، جبکہ: صرف قسم کے مماثلت عناصر ہیں جو ان کی قسم کے واحد ہی ہیں.

بدقسمتی سے، یہ تک کہ جہاں تک ایک واحد انتخاب ہو جاتا ہے لیکن چند دوسرے منتخبوں میں موجود ہیں جو اسی طرح کے عناصر کے ایک سیٹ میں ان کے حکم پر مبنی عناصر کو نشانہ بنا سکتے ہیں. یہ ہیں: نتھ بچے، : NTH-آخری-بچے اور نٹ-آخری قسم کے انتخاب کاروں کو آخری عنصر سے پہلے سے پہلے کی طرف سے شمار کرنے والے عناصر کے حکم کا تعین کرنے کے لئے استعمال کیا جاتا ہے. دوسرے منتخبوں کے ساتھ ان کو یکجا کرنے کے قابل بناتا ہے کہ ہمیں زیادہ پیچیدہ زنجیروں کی تعمیر کرنے کے قابل بناتا ہے جو مخصوص عناصر کو اپنی مقدار پر مبنی ہے.

مقدار کی مخصوص انتخاب کنندہ چینلز

selector chains

منتخب کنندہ: سب سے پہلے قسم: نتھ-آخری قسم کی قسم (3) اور جنرل بھائیوں کا مجموعہ ~ تینوں اور اس کے تمام بھائیوں کو نشانہ بنانے کے لئے مشترکہ کیا جا سکتا ہے، لہذا سب تینوں میں سے ایک سیٹ میں

چار پیش نظارہ انتخاب کاروں میں سے، ہم اس سبق میں استعمال کیا جاۓ گے جو اس سبق میں استعمال کرتے ہیں. اس اور NTH-آخری بچے کے انتخاب کے درمیان فرق یہ ہے کہ بعد میں اس سیٹ میں تمام عناصر کے بھائیوں میں شامل ہیں، جبکہ سابق میں صرف ایک ہی ایچ ٹی ایم ایل کی قسم کے عناصر شامل ہیں اور اس وجہ سے زیادہ انتخابی انتخاب ہے. اس سبق کے باقی حصوں کے لئے ہم - قسم کے قسم کے انتخاب کاروں کا استعمال کریں گے، تاہم - -چچرا مختلف قسم کے برابر ہیں.

NTH-آخری قسم کی قسم کے ساتھ ساتھ زیادہ مقبول ترین قسم کے انتخاب کے ساتھ ساتھ استعمال کیا جاسکتا ہے تاکہ اس سلسلے میں ایک اہم عنصر مقرر کیا جاسکتا ہے. مثال کے طور پر، ہم استعمال کر سکتے ہیں: سب سے پہلے قسم: اینٹی-آخری قسم کی قسم (3) عناصر کو نشانہ بنانے کے لئے جو ان کی قسم کے اختتام سے پہلے اور تیسرے دونوں ہیں، دوسرے الفاظ میں، سب سے پہلے تین سیٹ اس کے بعد ہم اس عام بھائیوں کے ساتھ توسیع کر سکتے ہیں ~ تمام بھائیوں کو منتخب کرنے کے لئے جو تینوں سیٹ کے پہلے کی پیروی کریں. ان دو انتخابی زنجیروں کو یکجا کرتے ہوئے، ہم ایک پیچیدہ انتخاب کنندہ بنا سکتے ہیں جو عناصر کو اہداف کرتا ہے جو تین سے پہلے اور اسی قسم کے تمام عناصر ہیں جو اس کی پیروی کرتے ہیں، اس طرح تینوں سیٹ میں تمام عناصر کو منتخب کرتے ہیں. 

. باکس: سب سے پہلے قسم: نتھ-آخری قسم (3)
. باکس: سب سے پہلے قسم: NTH-آخری قسم کی قسم (3) ~. باکس

یہ انتخابی سلسلہ صرف ایک مخصوص تعداد کے عناصر کے لئے کام کرتا ہے لیکن اس کی مقدار کی حد کو نشانہ بنانے کے لئے بھی نظر ثانی کی جا سکتی ہے.

selector chain

منتخب کرنے والوں کو آخری قسم کی قسم (N + 2) اور: NTH-آخری قسم کی قسم (-+ + 2) استعمال کرنے کے لئے استعمال کیا جا سکتا ہے کہ عناصر کو ہدف کرنے کے لئے استعمال کیا جاسکتا ہے

اگر ہم ایک مخصوص قیمت میٹر سے زیادہ مقدار میں یا اس سے کم کے ساتھ ایک سیٹ میں عناصر کو نشانہ بنانا چاہتے ہیں، تو ہم اس سلسلے میں (این + ایم) اور (این + ایم) کی تکنیکوں کے ساتھ استعمال کرسکتے ہیں. مثال کے طور پر، دو یا زیادہ عناصر کے ایک سیٹ میں تمام عناصر کو نشانہ بنانے کے لئے ہم استعمال کرسکتے ہیں: 

. باکس: سب سے پہلے قسم: نتھ-آخری قسم (این + 2)
.box: سب سے پہلے قسم: NTH-آخری قسم کی قسم (N + 2) ~. باکس

اسی طرح، ہم استعمال کرتے ہوئے دو یا کم عناصر کے ایک سیٹ میں تمام عناصر کو نشانہ بنا سکتے ہیں: 

.box: سب سے پہلے قسم: NTH-آخری قسم کی قسم (-N + 2)
. باکس: سب سے پہلے قسم: NTH-آخری قسم کی قسم (-+ 2) ~. باکس

جیسا کہ آپ دیکھ سکتے ہیں یہ ایک طاقتور انتخابی سلسلہ ہے جو ہمیں جاوا اسکرپٹ یا دیگر فریم ورک کی ضرورت کے بغیر بہت دلچسپ اور مفید چیزوں کو حاصل کرنے کے قابل بناتا ہے. یہ خاص طور پر مفید ہے جب یہ انضمام ترتیب پیدا کرنے کے لئے آتا ہے جو عناصر کی تعداد پر مبنی تبدیلی کرتا ہے.

متحرک، مقدار کی مخصوص ترتیب

grid layouts with odd and even numbers

عناصر کی بھی تعداد کے لئے گرڈ ترتیب بہت اچھا لگ رہا ہے، لیکن عجیب نمبروں کے لئے بہت زیادہ نہیں

آتے ہیں کہ ہم باکس کے ایک گروپ کو ظاہر کرنا چاہتے ہیں جو دو کالم، گرڈ ترتیب میں تلاش یا API کال کے نتائج کے نتائج کو ظاہر کرتے ہیں. مسئلہ یہ حقیقت یہ ہے کہ نتائج ایک بیرونی ذریعہ سے آتے ہیں اور ہمارے پاس نتائج کی تعداد کو جاننے کا کوئی طریقہ نہیں ہے، لہذا ہم نہیں جانتے کہ کتنے خانوں کو پیدا کیا جائے گا. جبکہ گرڈ ایک بڑی تعداد میں بکسوں کے لئے بہت اچھا لگ رہا ہے، جب ایک عجیب نمبر پر لاگو ہوتا ہے تو آخری باکس اکیلے قطار میں بیٹھتا ہے اور دیکھتا ہے ... ٹھیک ہے، قسم کی عجیب.

یہ خاص طور پر دشواری ہے جب فلیکس-بڑھتے ہوئے ان پر لاگو ہوتا ہے جب ان پر لاگو ہوتا ہے کیونکہ اس کا آخری عنصر قطار میں خالی جگہ میں اضافہ ہوتا ہے، اس طرح پوری چوڑائی کو لے جا رہا ہے. اس کی روک تھام کا ایک طریقہ یہ ہے کہ ایک عجیب تعداد میں سے ایک بڑی تعداد میں سب سے پہلے باکس کو 100٪ کی چوڑائی کا اطلاق کرکے سب سے پہلے باکس میں ایک مکمل قطار بنائے جو آخر سے اختتام سے بکسوں کی ایک بڑی تعداد بھی ہیں: پہلے بچے: NTH-آخری قسم (عجیب). یہ ایک بہتر ترتیب فراہم کرتا ہے کیونکہ یہ سب سے پہلے اور اس وجہ سے سب سے زیادہ متعلقہ یا حالیہ نتیجہ پچھلے ایک سے زیادہ اہمیت دیتا ہے.

ہم ایک خاص کیس بھی شامل کر سکتے ہیں جب مقدار تینوں کی طرف سے تقسیم کی جاتی ہے: پہلا بچہ: گرڈ کو تین کالم ترتیب میں تین کالم ترتیب میں تبدیل کرنے کے لئے سب سے پہلے 33٪ کی چوڑائی کو لاگو کرنے کے لۓ تینوں اور تمام بکسوں کی طرف سے ایک مقدار میں تقسیم کرنے والے باکس میں بکس اس کی پیروی کرتے ہیں. 

. باکس {
  چوڑائی: 50٪؛
}

.box: پہلے بچے: NTH-آخری قسم کی قسم (عجیب) {
  چوڑائی: 100٪؛
}

. باکس: پہلا بچہ: نوٹی آخری قسم (3N)،
. باکس: پہلا بچہ: NTH-آخری قسم کی قسم (3N) ~. باکس {
  چوڑائی: 33٪؛
}

نتیجہ

different layouts

ترتیبات صرف سی ایس ایس منتخب کرنے والے زنجیروں کا استعمال کرتے ہوئے عناصر کی تعداد پر مبنی ترتیب تبدیل کردی جا سکتی ہیں

جیسا کہ ہم نے دیکھا ہے، سی ایس ایس کے انتخاب کرنے والوں کی مقدار پر مبنی شیلیوں اور انکولی ترتیبات کو لاگو کرنے کے لئے مختلف قسم کے دلچسپ طریقوں میں ایک دوسرے کے ساتھ زنجیروں کو ایک دوسرے کے ساتھ زنجیر کی جا سکتی ہے. منتخب کرنے والے زنجیروں کو بھی ایک مخصوص مقدار کے عناصر کے ایک سیٹ کے والدین کو شیلیوں کو لاگو کرنے کے لئے استعمال کیا جا سکتا ہے، استعمال کرتے ہوئے :: اس سے پہلے یا :: چھاسو عناصر کے بعد جو والدین کے مکمل سائز کو لینے کے لئے پوزیشن میں ہیں. سی ایس ایس کاؤنٹرز کے ساتھ مل کر، یہ چھاسو عناصر والدین کے عنصر میں اولادوں کی کل تعداد کو ظاہر کرنے کے لئے استعمال کیا جا سکتا ہے، اس کے ساتھ ساتھ متن کی مقدار پر منحصر ہے.

یہ تکنیک متحرک، مقدار کی بنیاد پر شیلیوں اور ترتیبوں کو تخلیق کرنے کا ایک قابل قدر طریقہ پیش کرتے ہیں جو ایک نامعلوم تعداد میں عناصر کو سنبھالنے کے بعد مفید ہیں، جو اکثر APIS سے نمٹنے کے لۓ ہے.

یہ مضمون اصل میں مسئلہ 308 میں شائع کیا گیا تھا نیٹ ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کی بہترین فروخت میگزین. مسئلہ 308 خریدیں یا یہاں سبسکرائب کریں .

متعلقہ مضامین:

  • سپر تیز رفتار سی ایس ایس کے لئے 5 تجاویز
  • سی ایس ایس گرڈ کے ساتھ ایک ذمہ دار ترتیب بنائیں
  • سی ایس ایس ڈسپلے پراپرٹی کو سمجھنے

کيسے - انتہائی مشہور مضامین

کس طرح پٹھوں کو ڈراؤ

کيسے Sep 17, 2025

یہ جاننا کہ تحریک میں پٹھوں کو کس طرح اپنی طرف متوجہ کرنے کے لئے ایک اب ب..

تیز رفتار مجسمہ زبرش میں ایک مخلوق

کيسے Sep 17, 2025

جب زبرش میں مخلوق کا تصور کرتے ہوئے، آپ کے خیال کو ایک گریسیلیل کے طور پ�..

وی رے کے ساتھ سکریٹر درخت

کيسے Sep 17, 2025

آپ کے منظر میں تفصیلات شامل کرنا ہمیشہ آپ کے پاس جانے کا راستہ ہے جب آپ ا..

گنبد لائٹس کے ساتھ اپنے 3D کام کو روشن کریں

کيسے Sep 17, 2025

گنبد کی روشنی کا استعمال گزشتہ ایک دہائی میں سی جی آئی کی تخلیق میں سب س�..

رکن کے لئے انفینٹی تصویر کے ساتھ کیسے ڈراؤ

کيسے Sep 17, 2025

رکن کے لئے انفینٹی تصویر ایک عظیم ہے تصویر ایڈیٹر ، لیکن ..

zbrush میں ماڈل Darth Vader

کيسے Sep 17, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 ..

حقیقت پسندانہ تخلیقوں اور فولوں کے ساتھ 3D کپڑے بنائیں

کيسے Sep 17, 2025

حقیقت پسندانہ مجازی کپڑے بنانا سی جی حرکت پذیری کے بدعت کے بعد سے سب سے �..

آپ کے ڈیزائن کے کام کے اندر تخلیقی طور پر اسٹاک فوٹوگرافی کا استعمال کیسے کریں

کيسے Sep 17, 2025

آخری ریزورٹ ہونے کے بجائے، اسٹاک کی تصویر آپ کو تخلیقی ہتھیاروں کا ایک �..

اقسام