کسی گرڈ کنٹینر میں منتخب عناصر کو مشروط طور پر اسٹائل کرنا

کیلنڈر، شاپنگ کارٹس، گیلریاں، فائل ایکسپلورر، اور آن لائن لائبریریاں کچھ ایسے حالات ہیں جہاں منتخب اشیاء کو گرڈ (یعنی مربع جالیوں) میں دکھایا جاتا ہے۔ آپ جانتے ہیں، یہاں تک کہ وہ حفاظتی چیک بھی جو آپ سے کراس واک یا کسی بھی چیز کے ساتھ تمام تصاویر منتخب کرنے کو کہتے ہیں۔

مجھے گرڈ میں قابل انتخاب اختیارات ظاہر کرنے کا ایک صاف طریقہ ملا۔ نہیں، اس reCAPTCHA کو دوبارہ نہیں بنانا، بلکہ صرف ایک سے زیادہ آئٹمز کو منتخب کرنے کے قابل ہونا۔ اور جب دو یا دو سے زیادہ ملحقہ اشیاء کو منتخب کیا جاتا ہے، تو ہم ہوشیار استعمال کر سکتے ہیں۔ :nth-of-type combinators، چھدم عناصر، اور :checked سیوڈو کلاس ان کو اس انداز میں سٹائل کرنے کے لیے جہاں وہ ایک ساتھ گروپ میں نظر آئیں۔

گول چیک باکسز حاصل کرنے کے لیے combinators اور pseudos کا پورا خیال a سے آیا پچھلا مضمون میں نے لکھا تھا۔. یہ ایک سادہ سنگل کالم ڈیزائن تھا:

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

اس سے پہلے کہ ہم شروع کریں…

آپ کے لیے چند چیزوں کو نوٹ کرنا مفید ہوگا۔ مثال کے طور پر، میں سادگی کی خاطر اپنے ڈیمو میں static HTML اور CSS استعمال کر رہا ہوں۔ آپ کی درخواست پر منحصر ہے کہ آپ کو گرڈ اور اس میں موجود اشیاء کو متحرک طور پر بنانا پڑے گا۔ میں اثر پر توجہ مرکوز کرنے کے لیے رسائی کے لیے عملی جانچ پڑتال چھوڑ رہا ہوں، لیکن آپ یقینی طور پر پیداواری ماحول میں اس قسم کی چیز پر غور کرنا چاہیں گے۔

اس کے علاوہ، میں ترتیب کے لیے CSS گرڈ استعمال کر رہا ہوں۔ میں بھی یہی تجویز کروں گا لیکن یقیناً یہ صرف ایک ذاتی ترجیح ہے اور آپ کا مائلیج مختلف ہو سکتا ہے۔ میرے لیے، گرڈ کا استعمال مجھے کسی آئٹم کو نشانہ بنانے کے لیے بہن بھائیوں کے انتخاب کرنے والوں کو آسانی سے استعمال کرنے کی اجازت دیتا ہے۔ ::before اور ::after چھدم

اس لیے، آپ اپنی ایپلیکیشن میں جو بھی لے آؤٹ معیار استعمال کرنا چاہتے ہیں، اس بات کو یقینی بنائیں کہ چھدم کو اب بھی سی ایس ایس میں نشانہ بنایا جا سکتا ہے اور اس بات کو یقینی بنائیں کہ لے آؤٹ مختلف براؤزرز اور اسکرینوں پر برقرار رہے۔

آئیے اب شروع کرتے ہیں۔

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

مندرجہ ذیل اعداد و شمار سے پتہ چلتا ہے کہ کس طرح ::before ہر ایک میں خانوں کے سیوڈو عناصر کالم (پہلے کالم کے علاوہ) خانوں کو ان کے بائیں طرف اوورلیپ کریں، اور کیسے ::after ہر ایک میں خانوں کے سیوڈو عناصر صف (پہلی قطار کے علاوہ) اوپر والے خانوں کو اوورلیپ کریں۔

بیس کوڈ یہ ہے۔

مارک اپ کافی سیدھا ہے:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

ابتدائی سی ایس ایس میں کچھ اور چل رہا ہے۔ لیکن، پہلے، خود گرڈ:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

یہ پانچ قطاروں اور چار کالموں کا ایک گرڈ ہے جس میں چیک باکس ہوتے ہیں۔ میں نے چیک باکسز کی ڈیفالٹ ظاہری شکل کو مٹا دینے کا فیصلہ کیا، پھر انہیں اپنا ہلکا گرے پس منظر اور سپر گول بارڈرز دیں:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

یہ بھی نوٹ کریں کہ چیک باکس خود گرڈ ہیں۔ یہ ان کے رکھنے کے لئے کلید ہے ::before اور ::after چھدم عناصر. جس کے بارے میں بات کرتے ہوئے، آئیے اب یہ کرتے ہیں:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

ہم صرف چیک باکسز کے سیوڈو عناصر کو منتخب کر رہے ہیں جو پہلے کالم یا گرڈ کی پہلی قطار میں نہیں ہیں۔ input:not(:nth-of-type(4n+1)) پہلے چیک باکس سے شروع ہوتا ہے، پھر منتخب کرتا ہے۔ ::before وہاں سے ہر چوتھے آئٹم کا۔ لیکن ہم کہہ رہے ہیں نوٹس :not()، تو واقعی ہم کیا کر رہے ہیں۔ اچٹیں la ::before ہر چوتھے چیک باکس کا چھدم عنصر، پہلے سے شروع ہوتا ہے۔ پھر ہم اسٹائلز کو لاگو کر رہے ہیں۔ ::after پانچویں سے ہر چیک باکس کا سیڈو۔

اب ہم دونوں کو سٹائل کر سکتے ہیں۔ ::before اور ::after ہر ایک چیک باکس کے لیے چھدم جو گرڈ کے پہلے کالم یا قطار میں نہیں ہے، تاکہ وہ بالترتیب بائیں یا اوپر منتقل ہو جائیں، انہیں بطور ڈیفالٹ چھپایا جائے۔

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

اسٹائل کرنا :checked تھے

اب چیک باکسز کو اسٹائل کرنے کی بات آتی ہے جب وہ a میں ہوتے ہیں۔ :checked حالت. سب سے پہلے، آئیے انہیں ایک رنگ دیتے ہیں، ایک کہتے ہیں limegreen پس منظر:

input:checked { background: limegreen; }

ایک چیک شدہ باکس اپنے تمام ملحقہ چیک شدہ باکسز کو دوبارہ اسٹائل کرنے کے قابل ہونا چاہئے۔ دوسرے الفاظ میں، اگر ہم گرڈ میں گیارہویں چیک باکس کو منتخب کرتے ہیں، تو ہمیں اوپر، نیچے، بائیں اور دائیں جانب اس کے ارد گرد موجود خانوں کو بھی اسٹائل کرنے کے قابل ہونا چاہیے۔

یہ صحیح چھدم عناصر کو نشانہ بنا کر کیا جاتا ہے۔ ہم ایسا کیسے کریں؟ ٹھیک ہے، یہ گرڈ میں کالموں کی اصل تعداد پر منحصر ہے۔ یہاں CSS ہے اگر دو ملحقہ خانوں کو 5⨉4 گرڈ میں چیک کیا گیا ہے:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

اگر آپ چاہیں تو آپ مندرجہ بالا کوڈ کو متحرک طور پر بنا سکتے ہیں۔ تاہم، ایک عام گرڈ، ایک تصویری گیلری کا کہنا ہے کہ، کالموں کی تعداد کم ہوگی اور ممکنہ طور پر آئٹمز کی ایک مقررہ تعداد ہوگی، جب کہ قطاریں بڑھتی رہیں گی۔ خاص طور پر اگر موبائل اسکرین کے لیے ڈیزائن کیا گیا ہو۔ یہی وجہ ہے کہ یہ نقطہ نظر اب بھی جانے کا ایک موثر طریقہ ہے۔ اگر کسی وجہ سے آپ کی درخواست میں محدود قطاریں اور کالموں کی توسیع ہوتی ہے، تو گرڈ کو ایک طرف گھمانے پر غور کریں کیونکہ، آئٹمز کی ایک ندی کے ساتھ، CSS گرڈ انہیں بائیں سے دائیں اور اوپر سے نیچے (یعنی قطار در قطار) ترتیب دیتا ہے۔ .

ہمیں گرڈ میں آخری چیک باکسز کے لیے بھی اسٹائل شامل کرنے کی ضرورت ہے — وہ سبھی چھدم عناصر سے ڈھکے ہوئے نہیں ہیں کیونکہ وہ ہر ایک محور میں آخری آئٹمز ہیں۔

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

وہ کچھ مشکل سلیکٹرز ہیں! پہلا…

input:nth-of-type(4n-1):checked + input:checked

بنیادی طور پر یہ کہہ رہا ہے:

ایک چیک کیا گیا۔ <input> ایک چیک شدہ کے آگے عنصر <input> دوسرے آخری کالم میں۔

اور nth-of-type اس طرح شمار کیا جاتا ہے:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

لہذا، ہم تیسرے چیک باکس سے شروع کر رہے ہیں اور وہاں سے ہر چوتھے کو منتخب کر رہے ہیں۔ اور اگر اس ترتیب میں ایک چیک باکس کو چیک کیا جاتا ہے، تو ہم ملحقہ چیک باکسز کو بھی اسٹائل کرتے ہیں، اگر وہ بھی نشان زد ہوں۔

اور یہ سطر:

input:nth-of-type(4n):checked + * + * + * + input:checked

یہ کہہ رہا ہے:

An <input> عنصر بشرطیکہ چیک کیا گیا ہو، براہ راست ایک عنصر سے متصل ہے، جو براہ راست کسی دوسرے عنصر سے ملحق ہے، جو کہ دوسرے عنصر سے بھی براہ راست ملحق ہے، جو بدلے میں، براہ راست ایک عنصر سے ملحق ہے <input> عنصر جو چیک شدہ حالت میں ہے۔

اس کا مطلب یہ ہے کہ ہم ہر چوتھے چیک باکس کو منتخب کر رہے ہیں جسے چیک کیا گیا ہے۔ اور اگر اس ترتیب میں ایک چیک باکس کو چیک کیا جاتا ہے، تو ہم اس چیک باکس سے اگلے چوتھے چیک باکس کو سٹائل کرتے ہیں، اگر یہ بھی، نشان زد ہے۔

اسے استعمال میں لانا

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

میں نے گول سرحدیں استعمال کیں، لیکن آپ دوسری شکلیں آزما سکتے ہیں یا پس منظر کے اثرات کے ساتھ بھی تجربہ کر سکتے ہیں (تیمانی نے آپ کے خیالات کا احاطہ کیا ہے۔)۔ اب جب کہ آپ جانتے ہیں کہ فارمولا کیسے کام کرتا ہے، باقی آپ کی تخیل پر منحصر ہے۔

یہاں ایک مثال ہے کہ یہ ایک سادہ کیلنڈر میں کیسے نظر آتا ہے:

ایک بار پھر، یہ جامد مارک اپ کا استعمال کرتے ہوئے محض ایک کھردرا پروٹو ٹائپ ہے۔ اور، کیلنڈر کی خصوصیت میں غور کرنے کے لیے بہت سے اور بہت سے قابل رسائی تحفظات ہوں گے۔

---

یہ ایک لپیٹ ہے! بہت صاف، ٹھیک ہے؟ میرا مطلب ہے، جو کچھ ہو رہا ہے اس کے بارے میں بالکل "نیا" کچھ نہیں ہے۔ لیکن یہ ایک اچھی مثال ہے۔ چیزوں کا انتخاب سی ایس ایس میں اگر ہمارے پاس منتخب کرنے کی زیادہ جدید تکنیکوں پر ایک ہینڈل ہے جو کمبینیٹرز اور سیوڈوز کا استعمال کرتی ہے، تو ہماری اسٹائلنگ کی طاقتیں اسٹائلنگ ایک آئٹم سے کہیں زیادہ پہنچ سکتی ہیں - جیسا کہ ہم نے دیکھا، ہم مشروط طور پر کسی دوسرے عنصر کی حالت کی بنیاد پر آئٹمز کو اسٹائل کرسکتے ہیں۔

---

کسی گرڈ کنٹینر میں منتخب عناصر کو مشروط طور پر اسٹائل کرنا اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/