सीएसएस क्लासेस और सबक्लासेस

Question

क्या यह संभव है, इसके अलावा मैं जो कर रहा हूं, क्योंकि यह काम करने के लिए नहीं लगता, ऐसा करने के लिए? मैं विशेष रूप से उस वर्ग के लिए सीएसएस का उपयोग करने के लिए एक वर्ग के अधीन होने वाले उपवर्गों में सक्षम होना चाहता हूं।

सीएसएस

.area1
{
    border:1px solid black;
}
.area1.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2.item
{
    color:blue;
}

एचटीएमएल

<div class="area1">
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>
<div class="area2"> 
    <table>
        <tr>
            <td class="item">Text Text Text</td>
            <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>

ताकि मैं मूल सीएसएस वर्ग "एरिया 1", "एरिया 2" के तहत तत्वों के लिए सिर्फ क्लास = "आइटम" का उपयोग कर सकूं। मुझे पता है कि मैं इसे काम करने के लिए क्लास = "एरिया 1 आइटम" का उपयोग कर सकता हूं, लेकिन मुझे यह समझ में नहीं आता है कि इसके लिए इतना वर्बोज़ क्यों होना चाहिए। सीएसएस उपवर्ग को यह परिभाषित करने के लिए किस मूल वर्ग के तहत देखना नहीं चाहिए?

नोट: यह IE (अभी 7 का उपयोग करके) में काम करता है, लेकिन FF में ऐसा नहीं है, इसलिए मैं यह मान रहा हूं कि यह कुछ करने का CSS मानक तरीका नहीं है।

Answer 1

बस एक जगह जोड़ने की जरूरत है:

.area2 .item
{
    ...
}

Comments

मैं वास्तव में खुद उपवर्गों का उपयोग नहीं करता हूं ...... क्या कोई मुझे एक कारण दे सकता है जहां यह आवश्यक होगा?

— पैट्रिकस्वेनी

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

— मैट हॉवेल

Answer 2

FYI करें, जब आप एक नियम को परिभाषित करते हैं जैसा आपने ऊपर किया था, दो चयनकर्ताओं ने एक साथ जंजीर से:

.area1.item
{
    color:red;
}

इसका मतलब:

इस शैली को किसी भी तत्व पर लागू करें, जिसमें दोनों वर्ग "एरिया 1" और "आइटम" हैं।

जैसे कि:

<div class="area1 item">

अफसोस की बात है कि यह IE6 में काम नहीं करता है, लेकिन इसका यही मतलब है।

Comments

यह वास्तव में वह चीज थी जिसकी मुझे तलाश थी, इसे समझाने के लिए धन्यवाद!

— F-3000

मुझे पता है कि यह प्राचीन है लेकिन क्या आपका मतलब "क्षेत्र 1" और "आइटम" के बजाय "क्षेत्र 1" या "वस्तु" है? यह एक महत्वपूर्ण अंतर बनाता है।

— मगमर्ज़

इसके लिए बहुत धन्यवाद, मैं यह पता लगाने के लिए अपने सिर को रैक कर रहा था।

— user3547774 0

Answer 3

आपकी समस्या सीएसएस में आपके दो वर्गों के बीच एक गायब जगह है:

.area1.item
{
    color:red;
}

होना चाहिए

.area1 .item
{
    color:red;
}

Answer 4

क्या आप केवल बच्चों को चुने जाने के लिए मजबूर करना चाहते हैं? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1
{
        border:1px solid black;
}
.area1>.item
{
    color:red;
}
.area2
{
    border:1px solid blue;
}
.area2>.item
{
    color:blue;
}

Comments

वह नहीं जो मैं सोच रहा था, लेकिन यह अच्छी जानकारी है कि अगर मुझे केवल सीधे बच्चे चाहिए। धन्यवाद!

— रयान एबॉट

उस एक के बारे में नहीं जानता था। उस मिस्टरक्रिस्टर के लिए धन्यवाद

— सेबस्टियन

Answer 5

बस .area1 और .item के बीच एक स्थान रखें, जैसे:

.area1 .item
{
    color:red;
}

यह शैली क्लास एरिया 1 के साथ एक तत्व के अंदर क्लास आइटम वाले तत्वों पर लागू होती है।

Answer 6

बस अपनी कक्षाओं के बीच एक स्थान रखें

.area1 .item
{
    ...
}

यहां CSS चयनकर्ताओं के लिए एक बहुत अच्छा संदर्भ है ।

Answer 7

ऊपर kR105 के उत्तर से निम्नलिखित:

मेरी समस्या ओपी (मूल पोस्टर) के समान थी, केवल एक तालिका के बाहर हुई थी, इसलिए उपवर्गों को मूल वर्ग (तालिका) के दायरे के भीतर से नहीं बुलाया गया था, लेकिन इसके बाहर, इसलिए मुझे ADD चयनकर्ताओं के पास जाना पड़ा , kR105 के रूप में उल्लेख किया है।

यहाँ समस्या यह थी: मेरे पास दो बॉक्स (divs) थे, प्रत्येक में एक ही सीमा-त्रिज्या (HTML5), पैडिंग और मार्जिन था, लेकिन उन्हें अलग-अलग रंग बनाने की आवश्यकता थी। प्रत्येक रंग वर्ग के लिए उन 3 मापदंडों को दोहराने के बजाय, मैं सीमा-त्रिज्या / पैडिंग / मार्जिन को शामिल करने के लिए "सुपरक्लास" चाहता था, फिर अपने मतभेदों को व्यक्त करने के लिए केवल व्यक्तिगत "उपवर्ग" (प्रत्येक के आसपास दोहरे उद्धरण-चिह्न) क्योंकि वे वास्तव में उपवर्ग नहीं हैं - मेरी बाद की पोस्ट देखें)। यहां बताया गया है कि यह कैसे काम करता है:

HTML:

<body>
  <div class="box box1"> Hello my color is RED </div>
  <div class="box box2"> Hello my color is BLUE </div>
</body>

सीएसएस:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}

आशा है कि कोई इसे मददगार मिले।

Answer 8

यह CSS की रीढ़ की हड्डी है, कैस्केडिंग स्टाइल शीट्स में "कैस्केड" ।

यदि आप अपने सीएसएस नियमों को एक पंक्ति में लिखते हैं तो संरचना को देखना आसान हो जाता है:

.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }

कई वर्गों का उपयोग करना भी सीएसएस का एक अच्छा मध्यवर्ती / उन्नत उपयोग है, दुर्भाग्य से एक प्रसिद्ध IE6 बग है जो क्रॉस ब्राउज़र कोड लिखते समय इस उपयोग को सीमित करता है:

<div class="area1 larger"> .... </div>

.area1 { width:200px; }
.area1.larger { width:300px; }

IE6 पर ध्यान नहीं देता , एक बहु स्तरीय शासन में पहली चयनकर्ता तो वास्तव में IE6 .area1.larger शासन लागू होता है के रूप में

/*.area1*/.larger { ... }

मतलब यह All .larger तत्वों को प्रभावित करेगा।

यह IE6 में एक बहुत बुरा और दुर्भाग्यपूर्ण बग (कई में से एक) है जो आपको बहुत साफ सीएसएस की उस सुविधा का उपयोग करने के लिए मजबूर नहीं करता है यदि आप एक साफ क्रॉस-ब्राउज़र सीएसएस फ़ाइल चाहते हैं।

समाधान तब सीएसएस classname उपसर्गों का उपयोग करने के लिए wiht जेनेरिक classnames टकराने से बचने के लिए है:

.area1 { ... }
.area1.area1Larger { ... }

.area2.area2Larger { ... }

के रूप में अच्छी तरह से सिर्फ एक वर्ग का उपयोग कर सकते हैं, लेकिन उस तरह से आप अपने इच्छित तर्क में सीएसएस रख सकते हैं, जबकि यह जानते हुए कि .area1Larger केवल प्रभावित करता है ।area1, आदि।

Answer 9

आप जिस विभाग को div पर लागू करते हैं, उदाहरण के लिए, उस div के साथ शैली तत्वों के संदर्भ बिंदु के रूप में उपयोग किया जा सकता है।

<div class="area1">
    <table>
        <tr>
                <td class="item">Text Text Text</td>
                <td class="item">Text Text Text</td>
        </tr>
    </table>
</div>


.area1 { border:1px solid black; }

.area1 td { color:red; } /* This will effect any TD within .area1 */

सुपर सिमेंटिक होने के लिए आपको क्लास को टेबल पर ले जाना चाहिए।

    <table class="area1">
        <tr>
                <td>Text Text Text</td>
                <td>Text Text Text</td>
        </tr>
    </table>

Answer 10

आप इस तरह एक तत्व के भीतर दो कक्षाएं भी कर सकते हैं

<div class = "item1 item2 item3"></div>

कक्षा में प्रत्येक आइटम अपनी कक्षा है

.item1 {
  background-color:black;
}

.item2 {
  background-color:green;
}

.item3 {
  background-color:orange;
}

Answer 11

kR105 ने लिखा है:

आप इस तरह एक तत्व के भीतर दो कक्षाएं भी कर सकते हैं

<div class = "item1 item2 item3"></div

मैं इस के मूल्य को नहीं देख सकता, क्योंकि कैस्केडिंग शैलियों के सिद्धांत के बाद, अंतिम एक मिसाल है। उदाहरण के लिए, यदि मेरे पहले के उदाहरण में मैंने पढ़ने के लिए HTML को बदल दिया है

 <div class="box1 box2"> Hello what is my color? </div>

बॉक्स की सीमा और पाठ नीला होगा, क्योंकि .box2 की शैली इन मूल्यों को निर्दिष्ट करती है।

अपने पहले के पोस्ट में भी मुझे इस बात पर जोर देना चाहिए था कि चयनकर्ताओं को जोड़ना जैसा मैंने किया था, एक वर्ग के भीतर उपवर्ग (इस धागे में पहला समाधान) बनाने के समान नहीं है , हालांकि प्रभाव समान है।