ग्रिड कंटेनर में सशर्त रूप से चयनित तत्वों को स्टाइल करना

कैलेंडर, शॉपिंग कार्ट, गैलरी, फ़ाइल एक्सप्लोरर और ऑनलाइन लाइब्रेरी कुछ ऐसी स्थितियां हैं जहां चयन योग्य आइटम ग्रिड (यानी वर्ग जाली) में दिखाए जाते हैं। आप जानते हैं, यहां तक ​​​​कि वे सुरक्षा जांच भी जो आपको क्रॉसवॉक या जो भी हो, सभी छवियों का चयन करने के लिए कहते हैं।

मुझे ग्रिड में चयन योग्य विकल्पों को प्रदर्शित करने का एक साफ-सुथरा तरीका मिला। नहीं, उस रीकैप्चा को फिर से बनाना नहीं है, बल्कि बस कई वस्तुओं का चयन करने में सक्षम होना है। और जब दो या दो से अधिक आसन्न वस्तुओं का चयन किया जाता है, तो हम चतुर का उपयोग कर सकते हैं :nth-of-type संयोजक, छद्म तत्व, और :checked छद्म वर्ग उन्हें इस तरह से स्टाइल करने के लिए जहां वे एक साथ समूहबद्ध दिखते हैं।

गोलाकार चेकबॉक्स प्राप्त करने के लिए संयोजकों और छद्मों का पूरा विचार a . से आया था पिछला लेख मैंने लिखा था. यह एक साधारण सिंगल-कॉलम डिज़ाइन था:

इस बार, हालांकि, ग्रिड पर लंबवत और क्षैतिज दोनों अक्षों के साथ तत्वों पर गोलाई प्रभाव लागू होता है। इसके लिए आपको चेकबॉक्स स्टाइल पर मेरा पिछला लेख पढ़ने की ज़रूरत नहीं है क्योंकि मैं यहाँ वह सब कुछ कवर करने जा रहा हूँ जो आपको जानना चाहिए। लेकिन अगर आप इस लेख में हम जो कर रहे हैं, उस पर एक स्लिम डाउन टेक में रुचि रखते हैं, तो वह एक जाँच के लायक है।

हमारे शुरू करने से पहले…

कुछ बातों का ध्यान रखना आपके लिए फायदेमंद रहेगा। उदाहरण के लिए, मैं सादगी के लिए अपने डेमो में स्थिर HTML और 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 राज्य। सबसे पहले, आइए उन्हें एक रंग दें, कहें a limegreen पृष्ठभूमि:

input:checked { background: limegreen; }

एक चेक बॉक्स अपने सभी आसन्न चेक बॉक्स को फिर से स्टाइल करने में सक्षम होना चाहिए। दूसरे शब्दों में, यदि हम ग्रिड में ग्यारहवें चेकबॉक्स का चयन करते हैं, तो हम ऊपर, नीचे, बाएँ और दाएँ पर इसके आस-पास के बक्सों को स्टाइल करने में भी सक्षम होना चाहिए।

यह सही छद्म तत्वों को लक्षित करके किया जाता है। हम यह कैसे करे? खैर, यह ग्रिड में कॉलम की वास्तविक संख्या पर निर्भर करता है। यदि 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 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://css-tricks.com/conditionally-styling-selection-elements-in-a-grid-container/