CSS और HTML से पैरेंट को स्टाइल करना अगर उसके पास चाइल्ड है

समस्या

CSS3 में **पैरेंट सेलेक्टर** नहीं है। पैरेंट को उसके चाइल्ड के आधार पर स्टाइल नहीं किया जा सकता।

प्रस्तावित CSS4 समाधान

/* CSS4 विषय चयनकर्ता ($) - अभी तक लागू नहीं */
ul $li ul.sub { ... }  /* li जिसमें ul.sub है, उसे चुनें */

वर्तमान समाधान

1. JavaScript/jQuery (सबसे आम)

// jQuery - :has() सेलेक्टर
$('ul li:has(ul.sub)').addClass('has-sub');

// Vanilla JS
document.querySelectorAll('ul li').forEach(li => {
    if (li.querySelector('ul.sub')) {
        li.classList.add('has-sub');
    }
});

// CSS फिर
// li.has-sub { background: yellow; }

2. CSS-ओनली वर्कअराउंड्स

क) चाइल्ड के आधार पर पैरेंट स्टाइल (सीमित)

/* अगर चाइल्ड अंतिम है */
.parent:last-child { ... }

/* अगर चाइल्ड विशिष्ट प्रकार का है */
.parent > .special-child { ... }  /* पैरेंट नहीं, चाइल्ड स्टाइल होता है */

/* फोकस-विदिन (इंटरैक्टिव) */
.form:focus-within { border-color: blue; }  /* इनपुट फोकस होने पर फॉर्म स्टाइल */

ख) :has() प्सूडो-क्लास (CSS Selectors Level 4 - आधुनिक ब्राउज़र्स)

/* आधुनिक ब्राउज़र्स में काम करता है (Safari 15.4+, Chrome 105+, Firefox 121+) */
ul:has(li > ul.sub) { 
    border: 2px solid red; 
}

li:has(ul.sub) {
    background: yellow;
}

/* फॉर्म वैलिडेशन */
form:has(input:invalid) {
    border: 2px solid red;
}

3. HTML संरचना बदलें

<!-- क्लास को पैरेंट पर रखें -->
<ul class="has-sub">
    <li>Item</li>
    <li><ul class="sub">...</ul></li>
</ul>

ब्राउज़र सपोर्ट: :has()

सिफारिश

1. आधुनिक प्रोजेक्ट्स: `:has()` उपयोग करें (प्रोग्रेसिव एन्हांसमेंट के साथ)
2. लीगेसी सपोर्ट: जावास्क्रिप्ट से क्लास टॉगल करें
3. डिजाइन चरण: HTML संरचना में पैरेंट क्लास जोड़ें