CSS @scope नियम

वर्णन और उपयोग

CSS @scope यह नियम आपको विशिष्ट डॉम सबट्री में एलिमेंट चुनने की अनुमति देता है。

इस @ नियम के माध्यम से, आपको विशिष्ट डॉम सबट्री में एलिमेंट को लक्ष्यित करने की अनुमति है。

इस @ नियम से, आपको एक विशेषता वाले चयनकर्ता को लिखने के बगैर एलिमेंट को लक्ष्यित करने की अनुमति है。

इनस्टांस

उदाहरण 1

यहाँ, हम दो स्वतंत्र @scope एक ब्लॉक का उपयोग .ex1 और .ex2 कोटा में <a> एलिमेंटों को मेल खाने के लिए हैः :scope का उपयोग शैली के अधिकार को चुनने और सेट करने के लिए किया जाता है। इस उदाहरण में शैली का अधिकार वह <div> एलिमेंट है जो कोटा को लगाया है:

@scope (.ex1) {
  :scope {
    background-color: salmon;
    padding: 10px;
  }
  a {
    color: maroon;
  }
  a:hover {
    color: blue;
  }
}
@scope (.ex2) {
  :scope {
    background-color: beige;
    padding: 10px;
  }
  a {
    color: green;
  }
}

अपने आप साफ़ी दो

देखें नीचे एचटीएमएल:

<div class="container">
  <div class="news">
    <h2>Some header</h2>
    <img src="example.jpg" alt="Some image">
  </div>
</div>

यहाँ कुछ घुमाया हुआ <div> तत्व हैं, यदि हम ऊपरी दिए गए container/news भाग में <h2> और <img> तत्वों के लिए शैली निर्धारित करना चाहते हैं, तो नीचे दिए गए इस सामग्री को लिखना होगा (अग्रसूत्र को नहीं उपयोग करके):

उदाहरण 2

.container .news h2 {
  color: green;
}
.container .news img {
  border: 2px solid maroon;
}

अपने आप साफ़ी दो

उपयोग करके @scope नियम, आप को तत्वों को सटीक रूप से पाठ कर सकते हैं और ज़्यादा जटिल चयनकर्ताओं को लिखने के लिए आवश्यक नहीं है, जैसे कि नीचे दिया गया है:

उदाहरण 3

यहाँ, हम केवल .container घटक में <h2> और <img> तत्वों के लिए .container को @scope नियम के मूल क्षेत्रीय उपयोग के रूप में सेट कर रहे हैं:

@scope (.container) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

अपने आप साफ़ी दो

@scope नियम एक या अधिक नियम सेटों को शामिल करता है और दो तरीकों से उपयोग किया जा सकता है:

• CSS में स्वतंत्र ब्लॉक के रूप में, इस मामले में, यह एक प्रारंभिक भाग को शामिल करता है जिसमें क्षेत्रीय जड़ और वृत्तवृत्तीय क्षेत्रीय सीमा चयनकर्ता - इसके द्वारा क्षेत्र के ऊपरी और नीचे की सीमाएँ निर्धारित की जाती हैं।
• एचटीएमएल में <style> तत्व के भीतर आंतरिक शैली के रूप में, इस मामले में, प्रारंभिक भाग को छोड़ दिया गया है और शामिल नियम सेट स्वचालित रूप से <style> तत्व के पैर तत्व पर लागू होगा।

उदाहरण 4

“दोस्त केक क्षेत्रीय” केवल अभिजाता वृक्ष में दो तत्वों के बीच स्थित तत्वों के लिए है। यह उदाहरण है:

@scope (.container) to (.news) {
  h2 {
    font-size: 30px;
    color: green;
  }
  img {
    border: 5px solid maroon;
  }
}

अपने आप साफ़ी दो

CSS व्याकरण

@scope (क्षेत्रीय जड़) {
  नियम सेट
}

या

/* दोस्त केक क्षेत्रीय */
@scope (क्षेत्रीय जड़) to (क्षेत्रीय सीमा) {
  नियम सेट
}

ब्राउज़र समर्थन

गणना लेखांक में सही रूप से समर्थित @ नियम की पहली ब्राउज़र संस्करण के लिए प्रदर्शित किया जाता है।