सीएसएस शैलियों को उसके बाल तत्वों के आधार पर एक तत्व में लागू करें

Question

क्या एक तत्व के लिए सीएसएस शैली को परिभाषित करना संभव है, यह केवल तभी लागू किया जाता है यदि मिलान तत्व में एक विशिष्ट तत्व (प्रत्यक्ष बच्चे की वस्तु के रूप में) हो?

मुझे लगता है कि यह एक उदाहरण का उपयोग करके सबसे अच्छा समझाया गया है।

नोट : मैं मूल तत्व को स्टाइल करने की कोशिश कर रहा हूं , यह इस बात पर निर्भर करता है कि इसमें कौन से बाल तत्व हैं।

<style>
  /* note this is invalid syntax. I'm using the non-existing
   ":containing" pseudo-class to show what I want to achieve. */
  div:containing div.a { border: solid 3px red; }
  div:containing div.b { border: solid 3px blue; }
</style>

<!-- the following div should have a red border because
     if contains a div with class="a" -->
<div>
  <div class="a"></div>
</div>

<!-- the following div should have a blue border -->
<div>
  <div class="b"></div>
</div>

नोट 2 : मुझे पता है कि मैं जावास्क्रिप्ट का उपयोग करके इसे प्राप्त कर सकता हूं, लेकिन मैंने अभी सोचा कि क्या यह कुछ अज्ञात (मेरे लिए) सीएसएस सुविधाओं का उपयोग करके संभव है।

Comments

हो सकता है कि आप इस प्रश्न को स्पष्ट रूप से बोल्ड टेक्स्ट के साथ, राज्य में अद्यतन करना चाहें, कि आप अपने बच्चों को नहीं, बल्कि PAR div को स्टाइल करने की कोशिश कर रहे हैं। मुझे पता है कि जानकारी स्वयं प्रश्न में है, लेकिन जब तक आप गलत उत्तर का एक टन प्राप्त नहीं करना चाहते हैं, तब तक शायद यह प्रयास के लायक है।

— सेठ पेट्री-जॉनसन

धन्यवाद @ सेठ मैंने प्रश्न शीर्षक और पाठ को बेहतर बनाने की कोशिश की। कृपया प्रश्न को संपादित करें यदि आपको लगता है कि यह अभी भी अस्पष्ट है।

— M4N

एक सीएसएस माता-पिता चयनकर्ता

— जेम्स डोनली

यह सही उदाहरण है कि सीएसएस में इस प्रकार का समर्थन क्यों आदर्श होगा: ol < li:nth-child(n+10) { margin-left: 2rem; } ol < li:nth-child(n+100) { margin-left: 3rem; } ol < li:nth-child(n+1000) { margin-left: 4rem; }एक आदर्श दुनिया में यह निहित बच्चों olकी संख्या पर निर्भरता के मार्जिन को बढ़ाएगा liताकि बाईं ओर का मार्जिन केवल उतना ही चौड़ा हो जितना कि होना चाहिए।

— जोनमार्क वेबर

Answer 1

जहां तक ​​मुझे जानकारी है, बाल तत्व पर आधारित मूल तत्व को स्टाइल करना सीएसएस की उपलब्ध सुविधा नहीं है। आपको इसके लिए स्क्रिप्टिंग की आवश्यकता होगी।

यह अद्भुत होगा यदि आप ऐसा कुछ कर सकते हैं div[div.a]या div:containing[div.a]जैसा आपने कहा, लेकिन यह संभव नहीं है।

आप jQuery को देखने पर विचार कर सकते हैं । इसके चयनकर्ता 'प्रकार' के साथ बहुत अच्छी तरह से काम करते हैं। आप अपनी बाल सामग्री के आधार पर div का चयन कर सकते हैं और फिर एक पंक्ति में सभी के लिए माता-पिता के लिए एक सीएसएस वर्ग लागू कर सकते हैं।

यदि आप jQuery का उपयोग करते हैं, तो इस की तर्ज पर कुछ काम हो सकता है (अप्रयुक्त लेकिन सिद्धांत है):

$('div:has(div.a)').css('border', '1px solid red');

या

$('div:has(div.a)').addClass('redBorder');

एक सीएसएस वर्ग के साथ संयुक्त:

.redBorder
{
    border: 1px solid red;
}

यहाँ jQuery के लिए प्रलेखन "चयनकर्ता" है ।

Comments

साइड नोट: बेहतर प्रदर्शन के लिए, :hasचयनकर्ता के लिए jQuery doc पृष्ठ .has()विधि ( api.jquery.com/has ) का उपयोग करने की सलाह देता है => वर्तमान प्रश्न के लिए लागू यह उदाहरण के लिए$('div').has('div.a').css('border', '1px solid red');

— फ्रॉस्टी जेड

यह काम करने के लिए किसी को म्यूटेशन ऑब्जर्वर का उपयोग करना होगा, बच्चे को बदलने के लिए जांचने के लिए कि यह राज्य है ...

— महापुरूष

यह वास्तव में इस सवाल का जवाब नहीं देता है कि "क्या सीएसएस के साथ ऐसा करने का कोई तरीका है"। यह स्पष्ट रूप से बताता है: "मुझे पता है कि मैं जावास्क्रिप्ट का उपयोग करके इसे प्राप्त कर सकता हूं, लेकिन मुझे आश्चर्य हुआ कि क्या सीएसएस सुविधाओं में कुछ अज्ञात (मेरे लिए) का उपयोग करना संभव है।"

— SunshinyDoyle

developer.mozilla.org/en-US/docs/Web/CSS/:has , मुझे लगता है कि यह :hasचयनकर्ता काम कर सकता है लेकिन यह ड्राफ्ट संस्करण में है और कोई भी ब्राउज़र इसका समर्थन नहीं करता है।

— अलीफ 50

Answer 2

मूल रूप से, नहीं। निम्नलिखित वह होगा जो आप सिद्धांत में थे:

div.a < div { border: solid 3px red; }

दुर्भाग्य से यह मौजूद नहीं है।

"व्हाई द हेल नॉट" की तर्ज पर कुछ राइट-अप हैं। शॉन इनमैन द्वारा एक अच्छी तरह से तैयार की गई एक बहुत ही अच्छी जोड़ी:

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

Comments

सिर्फ 8 साल बाद एक अपडेट: इस चयनकर्ता विधि के लिए अभी भी कोई समर्थन नहीं है।

— क्रांग प्राइम

:has()छद्म वर्ग के रूप में इस सुविधा के लिए एक कार्यशील प्रारूप है , लेकिन हम केवल CSS4 में इसका उपयोग करेंगे। अभी (2019 के अंत में), जेएस अभी भी इस कार्यक्षमता को प्राप्त करने का एकमात्र तरीका है।

— zepp.lee

मेरा मानना ​​है कि यह सीएसएस शैलियों को सक्षम नहीं करेगा, चयनकर्ता का उपयोग करने के लिए इसे अभी भी जावास्क्रिप्ट की आवश्यकता होगी। जब तक यह नहीं बदला है?

— जस्टिन विग्नॉल

9 साल और क्या उन्हें लगता है कि यह सुविधा बेकार है?

— लोई गुयेन हुइन्ह

Answer 3

@ Kp के उत्तर के शीर्ष पर:

मैं इसके साथ काम कर रहा हूं और मेरे मामले में, मुझे एक बाल तत्व दिखाना है और उसके अनुसार मूल वस्तु की ऊंचाई को सही करना है (ऑटो-साइजिंग बूटस्ट्रैप हेडर में काम नहीं कर रहा है किसी कारण से मेरे पास डिबग करने का समय नहीं है) ।

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

tl; डॉ; माता-पिता aऔर bशैलियों को लागू करें <div>, बच्चे को नहीं (बेशक, हर कोई ऐसा करने में सक्षम नहीं होगा। यानी कोणीय घटक अपने स्वयं के निर्णय लेते हैं)।

<style>
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
</style>

<div class="parent">
  <div>child</div>
</div>

<script>
  // to show the children
  $('.parent').addClass('with-children');
</script>

Answer 4

मेरे मामले में, मुझे एक तत्व के सेल पैडिंग को बदलना पड़ा जिसमें एक तालिका के लिए एक इनपुट चेकबॉक्स था, जो डेटावेब के साथ गतिशील रूप से प्रदान किया जा रहा है:

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

InitComplete फ़ंक्शन के भीतर निम्नलिखित लाइन कोड को लागू करने के बाद मैं सही पैडिंग का उत्पादन करने में सक्षम था, जिसने पंक्तियों को असामान्य रूप से बड़ी ऊंचाई के साथ प्रदर्शित किया गया था

 $('tbody td:has(input.a)').css('padding', '0px');

अब, आप देख सकते हैं कि मूल तत्व पर सही शैलियों को लागू किया जा रहा है:

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

अनिवार्य रूप से, यह उत्तर @ केपी के उत्तर का विस्तार है, लेकिन इसे बेहतर ढंग से लागू करने में अधिक सहयोग। संक्षेप में, मुझे आशा है कि यह किसी और की मदद करता है क्योंकि यह काम करता है! अंत में, मुझे सही दिशा में ले जाने के लिए बहुत बहुत धन्यवाद @KP!