क्या ऐसे चयनकर्ता हैं जो कुछ ग्रिड स्थितियों में तत्वों को लक्षित करते हैं?

मेरे पास ऑटो-फ्लोइड ग्रिड आइटमों के समूह के साथ एक सीएसएस ग्रिड है। कभी-कभी ग्रिड आइटम एक 1 एक्स 1 ट्रैक होते हैं, और कभी-कभी वे 2 एक्स 2 ट्रैक होते हैं, इसलिए मैं स्रोत ऑर्डर से नहीं जानता कि आइटम ग्रिड में कुछ स्थितियों में होंगे। इसका मतलब है कि :nth-child() के साथ स्टाइल विश्वसनीय नहीं होगा।क्या ऐसे चयनकर्ता हैं जो कुछ ग्रिड स्थितियों में तत्वों को लक्षित करते हैं?

मैं कुछ ग्रिड कॉलम में आइटमों को स्टाइल जोड़ना चाहता हूं, (ज्यादातर अंतिम कॉलम)। क्या कोई सीएसएस चयनकर्ता है जो मुझे इन वस्तुओं को स्टाइल करने देगा?

उदाहरण के लिए, इस डेमो में, मैं स्टाइल बॉक्स 3, 5, और 9, (codepen here) कैसे स्टाइल करूं?

.grid-container { 
 
     display:grid; 
 
     grid-template-columns: 1fr 1fr 1fr; 
 
     grid-column-gap: 1em; 
 
     grid-row-gap: 1em; 
 
    } 
 

 
    .grid-item { 
 
     background-color: #aea; 
 
     text-align:center; 
 
     font-size:3em; 
 
     min-height:3em; 
 
     line-height: 3em; 
 
    } 
 

 
    .grid-item.double { 
 
     grid-column-start: span 2; 
 
     grid-row-start: span 2; 
 
    }

<body> 
 
<div class="grid-container"> 
 

 
    <div class="grid-item">1</div> 
 
    <div class="grid-item">2</div> 
 
    <div class="grid-item">3</div> 
 
    <div class="grid-item">4</div> 
 
    <div class="grid-item double">5</div> 
 
    <div class="grid-item">6</div> 
 
    <div class="grid-item">7</div> 
 
    <div class="grid-item">8</div> 
 
    <div class="grid-item">9</div> 
 
    <div class="grid-item">10</div> 
 
</div> 
 
</body>

संपादित करें: कोड एक सीएमएस में खत्म हो जाएगा और भविष्य में बदल सकता है।

स्रोत

2017-05-24 John B

शायद [यह सवाल] (https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system) किसी भी तरह से आपकी मदद कर सकता है? –

@kevinb। वह बूटस्ट्रैप्स "ग्रिड" ढांचा है। ओपी 'सीएसएस देशी' प्रदर्शन का उपयोग कर: ग्रिड; ' –

क्यों न केवल ': nth-child' का उपयोग करें? –

सीएसएस का उपयोग करके ग्रिड प्रदान किए जाने पर कुछ ग्रिड स्थितियों में मिलान करने वाले तत्वों के लिए कोई चयनकर्ता नहीं है। grid-structural selectors introduced in Selectors 4 दस्तावेज़ सेमेन्टिक्स में व्यक्त ग्रिड संरचनाओं के आधार पर केवल तत्वों से मेल खाता है, जैसे HTML में तालिकाओं (जिसका अर्थ यह भी है कि वे ग्रिड सेमेन्टिक्स के आधार पर तत्वों से मेल नहीं खा सकते हैं, जब वे display: table-* का उपयोग करके गैर-सारणीय तत्व प्रदान करते हैं)।

फ्लेक्सबॉक्स के साथ एक समान समस्या मौजूद है: विशिष्ट फ्लेक्स आइटमों के मिलान के लिए कोई चयनकर्ता नहीं है, जो कि उन्हें कैसे रखा जाता है। आम तौर पर, सीएसएस द्वारा शासित उनके लेआउट के आधार पर तत्वों से मेल खाने वाले कोई चयनकर्ता नहीं होते हैं। चयनकर्ता केवल दस्तावेज़ अर्थशास्त्र (स्रोत आदेश, आदि) के आधार पर तत्वों से मेल खाते हैं।

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

स्रोत

2017-05-24 15:23:31 BoltClock

यही वह है जिसे मैं डरता था। मुझे लगता है कि हमें इसके लिए चयनकर्ता 5 या इससे आगे की प्रतीक्षा करनी है। –

क्या ऐसे चयनकर्ता हैं जो कुछ ग्रिड स्थितियों में तत्वों को लक्षित करते हैं?

उत्तर

संबंधित मुद्दे