संभव डुप्लिकेट:
Is there a CSS parent selector?क्या कोई सीएसएस "हैशिल्डेरेन" चयनकर्ता है?
वहाँ एक सीएसएस चयनकर्ता अगर चाइल्ड तत्व मौजूद है मैं केवल का उपयोग कर सकते है?
पर विचार करें:
<div> <ul> <li></li> </ul> </div>
मैं display:none लागू करने के लिए div करने के लिए केवल अगर यह कम से कम एक बच्चे <li> तत्व नहीं है चाहते हैं।
कोई भी चयनकर्ता मैं इसका उपयोग कर सकता हूं?
नहीं, दुर्भाग्य से सीएसएस चयनकर्ताओं के साथ यह संभव नहीं है।
यहाँ कुछ पृष्ठभूमि जानकारी है यह सबसे अधिक है क्योंकि यह बहुत कॉम्पैक्ट है। मैंने इसे चयनकर्ता के साथ एक साथ उपयोग नहीं किया: jQuery ('। Navbar-inner: नहीं (: है (उल ली))')। सीएसएस ('प्रदर्शन', 'कोई नहीं'); – Typoheads
:empty के साथ क्रमबद्ध करें, लेकिन यह सीमित है।
उदाहरण: http://jsfiddle.net/Ky4dA/3/
यहां तक कि पाठ नोड्स माता पिता खाली नहीं समझा जा करने के लिए कारण होगा, तो DIV के अंदर एक यूएल मिलान किया जा रहा से DIV बनाए रखेगा।
<h1>Original</h1>
<div><ul><li>An item</li></ul></div>
<h1>No Children - Match</h1>
<div></div>
<h1>Has a Child - No Match</h1>
<div><ul></ul></div>
<h1>Has Text - No Match</h1>
<div>text</div>
DIV {
background-color: red;
height: 20px;
}
DIV:empty {
background-color: green;
}
संदर्भ: http://www.w3.org/TR/selectors/#empty-pseudo
आप स्क्रिप्ट तरीका अपनाते हैं, तो:
// pure JS solution
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
if(divs[i].childNodes.length == 0){ // or whatever condition makes sense
divs[i].style.display = "none";
}
}
, jQuery इस तरह आसान एक कार्य करता है, लेकिन यह एक काम आपको इतनी जानकारी शामिल करने के लिए नहीं है एक पूरी मुक्ति।
सीएसएस के पास अभी तक कोई अभिभावक नियम नहीं है, इसके आसपास एकमात्र तरीका है यदि आपको इसे लागू करना होगा, केवल माता-पिता जो एक विशिष्ट बच्चा रखते हैं, जावास्क्रिप्ट के साथ है, या jQuery नामक जावास्क्रिप्ट की लाइब्रेरी के साथ अधिक आसानी से है।
जावास्क्रिप्ट someways में सीएसएस के लिए एक similair तरह से लिखा जा सकता है, आपके उदाहरण के लिए हम अपने HTML पृष्ठ के तल पर कुछ इस तरह करना होगा:
<script type="text/javascript">
$('div:has(ul li)').css("color","red");
</script>
(इसके लिए आपको शामिल करने के लिए की आवश्यकता होगी अपने दस्तावेज़ में jQuery पुस्तकालय, बस अपने <head></head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
मैं इसे पसंद किया: –
आप jQuery का उपयोग करते हैं, तो आप इस समारोह की कोशिश कर सकते में निम्नलिखित रख कर
https://css-tricks.com/parent-selectors-in-css/वहाँ एक और विकल्प
$('div ul').each(function(x,r) {
if ($(r).find('li').length < 1){
$(r).css('display','block'); // set display none
}
})
सीएसएस के साथ संभव है, लेकिन संभव नहीं के साथ जावास्क्रिप्ट – Ibu