क्या एक सीएसएस नियम को दूसरे के भीतर संदर्भित करना संभव है?

Question

उदाहरण के लिए यदि मेरे पास निम्न HTML है:

<div class="someDiv"></div>

और यह सीएसएस:

.opacity {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

.someDiv {
    background: #000; height: 50px; width: 200px;

/*** How can I reference the opacity and radius classes here
     so this div has those generic rules applied to it as well ***/

}

जैसे स्क्रिप्टिंग भाषाओं में आपके जेनेरिक फ़ंक्शंस होते हैं, जिन्हें अक्सर स्क्रिप्ट के शीर्ष पर लिखा जाता है और हर बार आपको उस फ़ंक्शन का उपयोग करने की आवश्यकता होती है, जिसे आप हर बार सभी कोड को दोहराने के बजाय फ़ंक्शन को कॉल करते हैं।

Comments

क्या HTML बदलना संभव नहीं है?

— BoltClock

आप केवल कक्षाओं की अल्पविराम से अलग सूची जोड़ सकते हैं .radius, जैसे .radius, .another, .element{/* css*/}। यह आपको अतिरिक्त कोड बचाएगा, लेकिन यह संभवतः कम पठनीय बनाता है।

— लेकेनस्टाइन

क्या सीएसएस वर्ग का

— जैविक अधिवक्ता

Answer 1

नहीं, आप एक नियम-सेट को दूसरे से संदर्भित नहीं कर सकते।

हालाँकि, आप एक स्टाइलशीट के भीतर कई नियम-सेटों पर चयनकर्ताओं का पुन: उपयोग कर सकते हैं और एक नियम-सेट पर ( अल्पविराम से अलग करके ) कई चयनकर्ताओं का उपयोग कर सकते हैं ।

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

आप एक ही HTML तत्व के लिए कई वर्ग भी लागू कर सकते हैं (वर्ग विशेषता एक अंतरिक्ष अलग सूची लेता है)।

<div class="opacity radius">

उन दृष्टिकोणों में से किसी एक को आपकी समस्या का समाधान करना चाहिए।

यह संभवत: तब मदद करेगा जब आपने वर्ग के नाम का उपयोग किया हो, जिसमें वर्णित किया गया हो कि एक तत्व को स्टाइल के बजाय कैसे स्टाइल किया जाना चाहिए। स्टाइलशीट में कैसे छोड़ें ।

Comments

मैं असहमत नहीं हूं, लेकिन मुझे टिप्पणी करने की आवश्यकता है, कि यह मुझे नियमों fieldset legendको कॉपी करने की अनुमति नहीं देता है जैसे कि label.legend। मैं समझता हूं लेकिन अफसोस है।

— ऋष्टि

@rishta - Err ... मैंने कहा कि इस उत्तर के पहले पैराग्राफ में।

— क्वेंटिन

आप उन तत्वों के लिए एक नियम-सेट भी घोषित कर सकते हैं, जिनके पास केवल दो वर्ग हैं: .someDiv.other{/*style...*/}इस तरह, केवल उन तत्वों के लिए जो दोनों वर्ग प्रभावित हैं

— सिरमसेफ

Answer 2

जब तक आप किसी प्रकार के विस्तारित CSS जैसे SASS का उपयोग नहीं कर रहे हैं । हालाँकि उन दो अतिरिक्त कक्षाओं को लागू करना बहुत उचित है .someDiv।

यदि .someDivअद्वितीय है, तो मैं इसे एक आईडी देने के लिए भी चुनूंगा और आईडी का उपयोग करके इसे सीएसएस में संदर्भित करूंगा।

Answer 3

यदि आप इच्छुक हैं और थोड़ा सा रोजगार करने में सक्षम हैं, तो आप बस ऐसा कर सकते हैं:

$('.someDiv').css([".radius", ".opacity"]);

यदि आपके पास एक जावास्क्रिप्ट है जो पहले से ही पृष्ठ को संसाधित करता है या आप इसे <स्क्रिप्ट> टैग में कहीं भी संलग्न कर सकते हैं। यदि हां, तो दस्तावेज़ तैयार फ़ंक्शन में उपरोक्त लपेटें:

$(document).ready( function() {
  $('.someDiv').css([".radius", ".opacity"]);
}

मैं हाल ही में एक वर्डप्रेस प्लगइन को अपडेट करते समय इस पर आया था। उन्हें बदल दिया गया है जिसने सीएसएस के पार "महत्वपूर्ण" निर्देशों का बहुत उपयोग किया। मुझे कई शैलियों पर महत्वपूर्ण घोषित करने के प्रतिभाशाली निर्णय के कारण अपनी शैलियों को मजबूर करने के लिए jquery का उपयोग करना पड़ा।

Answer 4

आप आसानी से ऐसा कर सकते हैं SASS पूर्व प्रोसेसर के साथ @ कस्टम का उपयोग करके।

someDiv {
    @extend .opacity;
    @extend .radius;
}

साथ ही, आप जावास्क्रिप्ट (jQuery) का उपयोग कर सकते हैं:

$('someDiv').addClass('opacity radius')

HTML में कई वर्गों को जोड़ना सबसे आसान है

<div class="opacity radius">

Answer 5

बस अपने html में कक्षाएं जोड़ें

<div class="someDiv radius opacity"></div>

Answer 6

मुझे कल यह समस्या थी। @ क्वेंटिन का जवाब ठीक है:

No, you cannot reference one rule-set from another.

लेकिन मैंने सीएसएस (जैसे। नेट) में विरासत का अनुकरण करने के लिए एक जावास्क्रिप्ट फ़ंक्शन बनाया। "

    var inherit_array;
    var inherit;
    inherit_array = [];
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.style != null) {
                inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
            } else {
                inherit = "";
            }
            if (inherit != "") {
                inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
            }
        });
    });
    Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
        Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
            if (cssRule_i.selectorText != null) {
                inherit_array.forEach(function (inherit_i, index) {
                    if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
                        cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
                    }
                });
            }
        });
    });

Array.prototype.includesMember = function (arr2) {
    var arr1;
    var includes;
    arr1 = this;
    includes = false;
    arr1.forEach(function (arr1_i, index) {
        if (arr2.includes(arr1_i) == true) {
            includes = true;
        }
    });
    return includes;
}

और समतुल्य सीएसएस:

.test {
    background-color: yellow;
}

.productBox, .imageBox {
    --inherits: .test;
    display: inline-block;
}

और समतुल्य HTML:

<div class="imageBox"></div>

मैंने इसका परीक्षण किया और मेरे लिए काम किया, भले ही नियम अलग सीएसएस फाइलों में हों।

अद्यतन: मुझे इस समाधान में पदानुक्रम विरासत में एक बग मिला, और बहुत जल्द बग को हल कर रहा हूं।

Answer 7

आप var () फ़ंक्शन का उपयोग कर सकते हैं ।

किसी अन्य संपत्ति के मूल्य के किसी भी हिस्से के बजाय कस्टम संपत्ति (कभी-कभी "सीएसएस चर" कहा जाता है) के मूल्य को डालने के लिए var () CSS फ़ंक्शन का उपयोग किया जा सकता है ।

उदाहरण:

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}