Create quantity specific CSS styles and layouts

Sep 14, 2025
कैसे करना है

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

  • सीएसएस ट्रिक्स अपने वेब लेआउट को क्रांतिकारी बनाने के लिए

आखिरकार हम सीएसएस काउंटर के उपयोग को एक सेट के भीतर एक सेट के भीतर एक तत्व के भीतर प्रदर्शित करने के साथ-साथ माता-पिता के अंदर कुल गणना प्रदर्शित करने के लिए कवर करेंगे। यह सब केवल जावास्क्रिप्ट या ढांचे की आवश्यकता के बिना शुद्ध सीएसएस के साथ हासिल किया जाएगा, जिससे सरल और अधिक कुशल कोड होता है।

अंतहीन कोड की आवश्यकता के बिना साइट बनाने के लिए, आपको एक की आवश्यकता होगी वेबसाइट निर्माता । और जो भी आपकी साइट की क्षमताओं, सुनिश्चित करें वेब होस्टिंग सेवा उद्देश्य के लिए उपयुक्त है। कुछ अलग के लिए, अपने जाओ घन संग्रहण अपेक्षानुरूप।

एकल तत्व चयनकर्ता

सीएसएस 3 में केवल चयनकर्ताओं की एक जोड़ी है जो तत्वों की मात्रा निर्धारित कर सकती है, अर्थात्: केवल-बच्चे और केवल-प्रकार के चयनकर्ता। ऐसा कहकर, वे वास्तव में केवल यह निर्धारित करने में सक्षम हैं कि कोई तत्व अपने आप पर है या भाई-बहन है। द: केवल-बाल चयनकर्ता उन तत्वों से मेल खाता है जो उनके माता-पिता के एकमात्र बच्चे हैं, जबकि: केवल-प्रकार के प्रकार के तत्व जो उनके प्रकार के केवल होते हैं।

दुर्भाग्यवश, जहां तक ​​एकल चयनकर्ता जाते हैं लेकिन कुछ अन्य चयनकर्ता हैं जो समान तत्वों के एक सेट में उनके आदेश के आधार पर तत्वों को लक्षित कर सकते हैं। ये हैं: एनटीएच-चाइल्ड,: एनटीएच-ऑफ-टाइप, एनटीएच-लास्ट-चाइल्ड और एनटीएच-लास्ट-ऑफ-टाइप, जो आमतौर पर समान तत्वों के सेट में उनके आदेश के आधार पर तत्वों को लक्षित करने के लिए उपयोग किए जाते हैं। : एनटीएच-लास्ट-चाइल्ड और एनटीएच-लास्ट-ऑफ-टाइप चयनकर्ताओं का उपयोग अंतिम तत्व से पहले से पहले की ओर गिनती तत्वों के क्रम को निर्धारित करने के लिए किया जाता है। अन्य चयनकर्ताओं के साथ इनका संयोजन हमें अधिक जटिल श्रृंखला बनाने में सक्षम बनाता है जो उनकी मात्रा के आधार पर विशिष्ट तत्वों को लक्षित करते हैं।

मात्रा-विशिष्ट चयनकर्ता श्रृंखला

[5 9] selector chains

चयनकर्ता: प्रथम-प्रकार: एनटीएच-आखिरी प्रकार (3) और सामान्य भाई संयोजन ~ को तीन और उसके सभी भाई-बहनों में से पहले को लक्षित करने के लिए जोड़ा जा सकता है, इसलिए तीनों के एक सेट में

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

एनटीएच-लास्ट-ऑफ-प्रकार का उपयोग एक श्रृंखला बनाने के लिए अधिक लोकप्रिय प्रथम-प्रकार के चयनकर्ताओं के साथ किया जा सकता है जो वांछित मात्रा के सेट में पहले तत्व को लक्षित करता है। उदाहरण के लिए, हम उपयोग कर सकते हैं: प्रथम-प्रकार: NTH-अंतिम-प्रकार (3) उन तत्वों को लक्षित करने के लिए जो उनके प्रकार के अंत से पहले और तीसरे दोनों हैं, अन्य शब्दों में, पहले के पहले तीन का सेट। फिर हम इसे सामान्य भाई संयोजन के साथ बढ़ा सकते हैं ~ तीनों के सेट के पहले का पालन करने वाले सभी भाई-बहनों का चयन करने के लिए। इन दो चयनकर्ता श्रृंखलाओं को संयोजित करते हुए, हम एक जटिल चयनकर्ता बना सकते हैं जो तत्वों को लक्षित करता है जो तीनों में से तीन और उसी प्रकार के सभी तत्व हैं जो इसका पालन करते हैं, जिससे तीन के सेट में सभी तत्वों का चयन किया जाता है। 

। बॉक्स: प्रथम-प्रकार: NTH-अंतिम-प्रकार (3),
.box: प्रथम-प्रकार: NTH-अंतिम-प्रकार (3) ~ .box

यह चयनकर्ता श्रृंखला न केवल तत्वों की एक विशिष्ट संख्या के लिए काम करती है बल्कि मात्रा की एक श्रृंखला को लक्षित करने के लिए भी संशोधित की जा सकती है।

selector chain

चयनकर्ता nth-अंतिम-प्रकार (N + 2) और: nth-अंतिम-प्रकार (-n + 2) का उपयोग क्रमशः दो से अधिक से अधिक सेट में तत्वों को लक्षित करने के लिए किया जा सकता है

यदि हम किसी विशेष मान एम से अधिक या उससे कम मात्रा के साथ एक सेट में तत्वों को लक्षित करना चाहते हैं, तो हम क्रमशः (एन + एम) और (-एन + एम) तकनीकों के साथ श्रृंखला का उपयोग कर सकते हैं। उदाहरण के लिए, दो या अधिक तत्वों के सेट में सभी तत्वों को लक्षित करने के लिए हम उपयोग कर सकते हैं: 

। बॉक्स: प्रथम-प्रकार: NTH-अंतिम-प्रकार (N + 2),
.बॉक्स: प्रथम-प्रकार: NTH-अंतिम-प्रकार (N + 2) ~ .box

इसी तरह, हम सभी तत्वों को दो या उससे कम तत्वों के सेट में लक्षित कर सकते हैं: 

.बॉक्स: प्रथम-प्रकार: NTH-LAST-of-TYPE (-N + 2),
.box: प्रथम-प्रकार: NTH-अंतिम-प्रकार (-n + 2) ~ .BOX

जैसा कि आप देख सकते हैं कि यह एक शक्तिशाली चयनकर्ता श्रृंखला है जो हमें जावास्क्रिप्ट या अन्य ढांचे की आवश्यकता के बिना बहुत ही रोचक और उपयोगी चीजों को प्राप्त करने में सक्षम बनाता है। यह विशेष रूप से उपयोगी होता है जब तत्वों की संख्या के आधार पर अनुकूली लेआउट बनाने की बात आती है।

गतिशील, मात्रा-विशिष्ट लेआउट

grid layouts with odd and even numbers

ग्रिड लेआउट की संख्या के लिए भी बहुत अच्छा लग रहा है, लेकिन विषम संख्याओं के लिए इतना नहीं

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

फ्लेक्सबॉक्स आइटम का उपयोग करते समय यह विशेष रूप से समस्याग्रस्त होता है जब फ्लेक्स-ग्रोथ के साथ लागू होता है क्योंकि यह आखिरी तत्व को पंक्ति पर खाली जगह में बढ़ने का कारण बनता है, जिससे पूर्ण चौड़ाई होती है। इसे रोकने का एक तरीका यह हो सकता है कि बक्से की एक विषम संख्या में पहले बक्से को 100% की चौड़ाई लागू करके एक पूर्ण पंक्ति ले लीजिए जो पहले से एक विषम संख्या भी हैं, इसका उपयोग करके: प्रथम-बच्चे: nth-अंतिम-प्रकार (विषम)। यह एक बेहतर लेआउट प्रदान करता है क्योंकि यह पहले और इसलिए सबसे प्रासंगिक या हालिया परिणाम पिछले एक की तुलना में अधिक महत्व देता है।

हम तीन का उपयोग करके विभाजित होने पर भी एक विशेष मामला जोड़ सकते हैं: प्रथम-बच्चे: एनटीएच-लास्ट-ऑफ-टाइप (3 एन) ग्रिड को 33% की चौड़ाई लागू करके तीन-स्तंभ लेआउट में बदलने के लिए तीन और सभी बक्से द्वारा विभाजित मात्रा के साथ एक सेट में बक्से। 

 .Box {
  चौड़ाई: 50%;
}

.box: प्रथम-बच्चा: nth-अंतिम-प्रकार (विषम) {
  चौड़ाई: 100%;
}

.बॉक्स: प्रथम-बच्चा: एनटीएच-अंतिम-प्रकार (3 एन),
.बॉक्स: प्रथम-बच्चा: nth-अंतिम-प्रकार (3n) ~ .box {
  चौड़ाई: 33%;
}

निष्कर्ष

different layouts

सीएसएस चयनकर्ता श्रृंखलाओं का उपयोग करके तत्वों की संख्या के आधार पर लेआउट को बदला जा सकता है

जैसा कि हमने देखा है, तत्वों की मात्रा के आधार पर परिवर्तन शैलियों और अनुकूली लेआउट को लागू करने के लिए सीएसएस चयनकर्ताओं को विभिन्न प्रकार के दिलचस्प तरीकों से एक साथ बनाया जा सकता है। चयनकर्ता श्रृंखला का उपयोग किसी निश्चित मात्रा के तत्वों के सेट के सेट के माता-पिता को शैलियों को लागू करने के लिए भी किया जा सकता है, इसका उपयोग करके :: पहले या :: छद्म-तत्वों के बाद माता-पिता के पूर्ण आकार को लेने के लिए तैनात किया जाता है। सीएसएस काउंटर के साथ संयुक्त, इन छद्म-तत्वों का उपयोग माता-पिता तत्व में वंशजों की कुल संख्या को प्रदर्शित करने के लिए किया जा सकता है, साथ ही पाठ जो वंशजों की मात्रा के आधार पर बदलता है।

ये तकनीकें गतिशील, मात्रा आधारित शैलियों और लेआउट बनाने का एक मूल्यवान तरीका प्रदान करती हैं जो अज्ञात संख्या तत्वों को संभालने के दौरान उपयोगी होती हैं, जो अक्सर एपीआई से निपटने के मामले में होती हैं।

[15 9] यह लेख मूल रूप से जारी 308 में प्रकाशित किया गया था

[15 9] जाल [15 9] , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका। [15 9] यहां अंक 308 खरीदें [15 9] या [15 9] यहां सदस्यता लें [15 9] ।

संबंधित आलेख:

  • सुपर-फास्ट सीएसएस के लिए 5 टिप्स
  • CSS ग्रिड के साथ एक उत्तरदायी लेआउट बनाएँ
  • सीएसएस प्रदर्शन संपत्ति को समझना

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to kitbash on the go with Shapr3D

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: एडम dewhirst) [1 9] Shapr3D किटबाशिंग के लिए �..

Work smart with your Zbrush UI

कैसे करना है Sep 14, 2025

कुछ भी जो हमारे दिमाग को उत्तेजित करता है, हमारी उत्पादकता को प्रभावित कर..

Create a lifelike digital human

कैसे करना है Sep 14, 2025

आपको जानकारी मिल सकती है लोगों को कैसे आकर्षि�..

Create a wobbly text effect with JavaScript

कैसे करना है Sep 14, 2025

पाठ और टाइपोग्राफी के लिए प्रभाव का परिचय एक नया �..

7 killer ways to influence user behaviour

कैसे करना है Sep 14, 2025

वेबसाइटें अपने उपयोगकर्ताओं के व्यवहार को प्रभावित करने के लिए मनोवैज्�..

How to make your WordPress website multilingual

कैसे करना है Sep 14, 2025

इंटरनेट पर उपयोग की जाने वाली शीर्ष 10 भाषाओं में, �..

How to master skin shading in 3D

कैसे करना है Sep 14, 2025

लंबे समय से अब मैं अपने साथ एक रट में फंस गया हूं ..

The anatomy of caricature: 15 top tips

कैसे करना है Sep 14, 2025

एक पूर्णकालिक फ्रीलांसर के रूप में, मैं शैलियों क..

श्रेणियाँ