حالت دادن مشروط به عناصر انتخاب شده در یک ظرف شبکه

تقویم‌ها، سبد خرید، گالری‌ها، کاوشگر فایل و کتابخانه‌های آنلاین برخی از موقعیت‌هایی هستند که آیتم‌های قابل انتخاب به صورت شبکه‌ای (به عنوان مثال شبکه‌های مربعی) نشان داده می‌شوند. می‌دانید، حتی آن دسته از بررسی‌های امنیتی که از شما می‌خواهند همه تصاویر دارای عابر پیاده یا هر چیز دیگری را انتخاب کنید.

من یک راه منظم برای نمایش گزینه های قابل انتخاب در یک شبکه پیدا کردم. نه، آن reCAPTCHA را دوباره ایجاد نمی کنیم، بلکه به سادگی می توان چندین مورد را انتخاب کرد. و هنگامی که دو یا چند مورد کنار هم انتخاب می شوند، می توانیم از clever استفاده کنیم :nth-of-type ترکیب کننده ها، شبه عناصر، و :checked شبه کلاس برای استایل دادن به آنها به گونه ای که در کنار هم به نظر برسند.

کل ایده ترکیب‌کننده‌ها و شبه‌ها برای به‌دست آوردن چک‌باکس‌های گرد از یک نشأت می‌گرفت مقاله قبلی که نوشتم. این یک طرح ساده تک ستونی بود:

با این حال، این بار، اثر گرد بر روی عناصر در امتداد هر دو محور عمودی و افقی در یک شبکه اعمال می شود. برای این کار لازم نیست آخرین مقاله من در مورد استایل چک باکس را خوانده باشید زیرا همه چیزهایی را که باید بدانید در اینجا پوشش می دهم. اما اگر شما علاقه مند هستید که در مورد کاری که ما در این مقاله انجام می‌دهیم، نگاهی باریک داشته باشید، ارزش بررسی کردن را دارد.

قبل از اینکه شروع کنیم…

توجه به چند نکته برای شما مفید خواهد بود. به عنوان مثال، من از HTML ایستا و CSS در نسخه نمایشی خود برای سادگی استفاده می کنم. بسته به برنامه شما ممکن است مجبور شوید شبکه و موارد موجود در آن را به صورت پویا تولید کنید. من بررسی‌های عملی برای دسترسی را کنار می‌گذارم تا روی اثر تمرکز کنم، اما شما قطعاً می‌خواهید چنین چیزی را در یک محیط تولید در نظر بگیرید.

همچنین، من از CSS Grid برای طرح بندی استفاده می کنم. من همان را توصیه می کنم، اما، البته، این فقط یک ترجیح شخصی است و مسافت پیموده شده شما ممکن است متفاوت باشد. برای من، استفاده از شبکه به من این امکان را می دهد که به راحتی از انتخابگرهای خواهر و برادر برای هدف قرار دادن یک آیتم استفاده کنم ::before و ::after شبه

از این رو، از هر استانداردی که ممکن است بخواهید در برنامه خود استفاده کنید، مطمئن شوید که شبه ها همچنان می توانند در CSS مورد هدف قرار گیرند و اطمینان حاصل کنید که طرح بندی در مرورگرها و صفحه های مختلف ثابت می ماند.

بیایید اکنون شروع کنیم

همانطور که ممکن است در نسخه ی نمایشی قبلی متوجه شده باشید، علامت زدن و برداشتن علامت یک عنصر چک باکس، بسته به وضعیت انتخاب سایر چک باکس های اطراف آن، طراحی جعبه ها را تغییر می دهد. این امکان پذیر است زیرا من به جای عنصر خود، هر باکس را با استفاده از شبه عناصر عناصر مجاور خود استایل دادم.

شکل زیر نشان می دهد که چگونه ::before شبه عناصر جعبه در هر کدام ستون (به جز ستون اول) کادرهای سمت چپ خود را با هم همپوشانی می‌کنند، و چگونه ::after شبه عناصر جعبه در هر کدام ردیف (به جز ردیف اول) کادرهای بالا را همپوشانی کنید.

این کد پایه است

نشانه گذاری بسیار ساده است:

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

در CSS اولیه کمی بیشتر اتفاق می افتد. اما، اول، خود شبکه:

/* 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 حالت. اول، بیایید به آنها یک رنگ بدهیم، بگویید a limegreen زمینه:

input:checked { background: limegreen; }

یک کادر علامت دار باید بتواند تمام کادرهای علامت زده مجاور خود را دوباره استایل کند. به عبارت دیگر، اگر چک باکس یازدهم را در شبکه انتخاب کنیم، باید بتوانیم کادرهای اطراف آن را در بالا، پایین، چپ و راست استایل کنیم.

این کار با هدف قرار دادن شبه عناصر صحیح انجام می شود. چگونه ما آن را انجام دهیم؟ خوب، این به تعداد واقعی ستون ها در شبکه بستگی دارد. اگر دو کادر مجاور در یک شبکه 5⨉4 علامت زده شوند، CSS این است:

/* 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 Grid آنها را از چپ به راست و از بالا به پایین مرتب می‌کند (یعنی سطر به سطر) .

ما همچنین باید برای آخرین چک باکس های شبکه یک استایل اضافه کنیم - همه آنها توسط شبه عناصر پوشش داده نمی شوند زیرا آخرین موارد در هر محور هستند.

/* 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> عنصری که در حالت بررسی قرار دارد.

معنی آن این است که ما هر چهارمین چک باکسی که علامت زده می شود را انتخاب می کنیم. و اگر یک چک باکس در آن دنباله علامت زده شود، اگر چک باکس بعدی را نیز علامت زده است، استایل می کنیم.

استفاده از آن

چیزی که ما فقط به آن نگاه کردیم، اصل کلی و منطق پشت طراحی است. باز هم، میزان مفید بودن آن در برنامه شما به طراحی شبکه بستگی دارد.

من از حاشیه های گرد استفاده کردم، اما می توانید اشکال دیگر را امتحان کنید یا حتی با افکت های پس زمینه آزمایش کنید (تمانی شما را برای ایده ها پوشش داده است). اکنون که می دانید فرمول چگونه کار می کند، بقیه چیزها کاملاً به تخیل شما بستگی دارد.

در اینجا نمونه ای از نحوه ظاهر آن در یک تقویم ساده آورده شده است:

باز هم، این صرفاً یک نمونه اولیه اولیه با استفاده از نشانه گذاری استاتیک است. و، ملاحظات دسترسی بسیار زیادی وجود دارد که باید در یک ویژگی تقویم در نظر گرفته شود.

---

این یک بسته بندی است! خیلی تمیز، درسته؟ منظورم این است که هیچ چیز دقیقاً "جدید" در مورد آنچه اتفاق می افتد وجود ندارد. اما مثال خوبی است انتخاب چیزها در CSS اگر روی تکنیک‌های انتخاب پیشرفته‌تر که از ترکیب‌کننده‌ها و شبه‌ها استفاده می‌کنند، کنترل داشته باشیم، قدرت استایل ما می‌تواند بسیار فراتر از یک استایل یک آیتم باشد - همانطور که دیدیم، می‌توانیم به صورت مشروط آیتم‌ها را بر اساس وضعیت عنصر دیگر استایل‌بندی کنیم.

---

حالت دادن مشروط به عناصر انتخاب شده در یک ظرف شبکه در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/