HTML में स्टाइल्स केवल पैरेंट एलिमेंट और उसके चाइल्ड्स पर कैसे लागू करें?

scoped एट्रिब्यूट का उपयोग <style> टैग पर करके यह निर्दिष्ट किया जाता है कि स्टाइल्स केवल उस <style> के पैरेंट एलिमेंट और उसके चाइल्ड एलिमेंट्स पर लागू होंगी (पूरे डॉक्यूमेंट पर नहीं)। यह CSS स्कोपिंग/एनकैप्सुलेशन प्रदान करता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      h2 { color: yellow; } 
    </style> 
  </head> 
  <body> 
    <div> 
      <style scoped> 
        h2 { color: grey; } 
      </style> 
      <h2>ग्रे हेडिंग</h2> 
    </div> 
    <h2>पीली हेडिंग</h2> 
  </body> 
</html>

ब्राउज़र सपोर्ट: scoped एट्रिब्यूट अधिकांश ब्राउज़र्स में हटा दिया गया है या कभी पूरी तरह इम्प्लीमेंट नहीं हुआ। आधुनिक विकल्प: CSS मॉड्यूल्स, शैडो DOM, CSS-in-JS, BEM नामकरण, या स्कोप्ड CSS के लिए @scope नियम (CSS स्कोपिंग मॉड्यूल, प्रयोगात्मक)।