2011-08-11 4 views
10

मैं एक ट्यूटोरियल से कुछ सीएसएस पर काम कर रहा हूँ, एक div इस वर्ग के होते हैं:कक्षा = "name1 name2" के साथ div को संदर्भित करने के लिए कैसे?

<div class="related products"> 

मैं इसे कैसे स्टाइलशीट में देख सकते हैं?

+0

संभावित डुप्लिकेट [स्पेस के साथ कक्षाओं का चयन कैसे करें] (http://stackoverflow.com/questions/6885013/how-to-select-classes-with- स्पेस) – BoltClock

उत्तर

17

div वास्तव में दो वर्ग, related और products है। आप इसे अपने स्टाइलशीट में .related या .products के साथ संदर्भित कर सकते हैं, और यह उन दोनों नियमों से शैलियों को उठाएगा। उदाहरण के लिए, निम्नलिखित सीएसएस के साथ, अपने प्रश्न में div में पाठ फ़ॉन्ट आकार 12 के साथ लाल रंग में दिखाई देगा:

.related { color:#ff0000 } 
.products { font-size:12px } 

आप, दोनों वर्गों के साथ तत्वों का चयन अपने स्टाइलशीट में .related.products उपयोग करना चाहते हैं। उदाहरण के लिए, जोड़ने के ऊपर के उदाहरण के लिए निम्न:

.related.products { font-weight:bold } 

और में पाठ अपने div क्योंकि यह सभी 3 चयनकर्ताओं से मेल खाता है, सभी तीन नियमों प्राप्त होगा। यहां एक काम कर रहे example है।

-4

सीएसएस में, बस ऐसा करने से div के नाम वर्ग डाल:

.related products { 
/*styling to go here*/ 
} 

अब से संबंधित उत्पादों वर्ग के भीतर किसी भी स्टाइल कि div को लागू किया जाएगा।

+0

यह सही नहीं है। यह 'संबंधित' –

+0

की कक्षा के साथ किसी नोड के बच्चे '' का चयन करता है यह उत्तर केवल सादा गलत है। – Exelian

+0

गलत! यह 'संबंधित' वर्ग के साथ तत्व के भीतर "0'' तत्व "की तलाश करेगा। –

3

div.related.products सामान्य विधि

+0

क्या आदेश महत्वपूर्ण है, यानी 'div.products.related' काम भी होगा? – ain

+0

@ain: [केवल आईई 6 के लिए] (http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305) - अन्य ब्राउज़रों के लिए यह नहीं करता कोई फर्क नहीं पड़ता। – BoltClock

2

आप div.related.products द्वारा इसे संदर्भ जो literaly तब्दील करने के लिए "संबंधित और उत्पादों के वर्ग का वर्ग के साथ एक div" है।

या, आप या तो कक्षा नामों का उपयोग करके इसका संदर्भ दे सकते हैं, क्योंकि यह दोनों को पकड़ लेगा।

jsFiddle Example

संबंधित मुद्दे