किसी अन्य तत्व के बाद पहले होने वाले तत्व का चयन करें


113

मुझे एक पृष्ठ पर निम्नलिखित HTML कोड मिला है:

<h4>Some text</h4>
<p>
Some more text!
</p>

मेरे में .cssमैं h4तत्व का चयन करने के लिए निम्नलिखित चयनकर्ता हूं । ऊपर दिया गया HTML कोड पूरे कोड का एक छोटा सा हिस्सा है; divशैडोबॉक्स से संबंधित कई और लिपटी हैं:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

इसलिए, मेरे पास अपने h4तत्व के लिए सही शैली है , लेकिन मैं pअपने HTML में टैग को भी स्टाइल करना चाहता हूं।

क्या सीएसएस-चयनकर्ताओं के साथ यह संभव है? और यदि हाँ, तो मैं यह कैसे कर सकता हूँ?

जवाबों:


199
#many .more.selectors h4 + p { ... }

इसे आसन्न सहोदर चयनकर्ता कहा जाता है ।


1
एक विकल्प यह है कि अपने h4तत्वों को खोजने के लिए जेएस का उपयोग करें , अगले भाई के पास चलें और उस पर सीएसएस क्लास जोड़ें। JQuery के साथ, यह बस होगा$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');
Phrogz

2
ध्यान दें कि यह केवल पहले एक IMMEDIATELY के बाद वाले तत्वों पर काम करता है। यदि आप दूसरा अगला html एलिमेंट रखना चाहते हैं, तो आप इसे इस तरह से चेन कर सकते हैं: #selector .original + h4 + p, a .original एलिमेंट को फॉलो करते हुए p4 पाने के लिए। बहुत उपयोगी
user1610743

30

अपने शाब्दिक उदाहरण के लिए आप आसन्न चयनकर्ता (+) का उपयोग करना चाहेंगे।

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

हालाँकि, यदि आप सभी क्रमिक अनुच्छेदों का चयन करना चाहते हैं, तो आपको सामान्य सिबलिंग चयनकर्ता (~) का उपयोग करना होगा।

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

यह IE 7+ दुर्भाग्य में छोटी गाड़ी होने के लिए जाना जाता है


16

बस इस तरह से मारो जब इस प्रकार की चीज़ को हल करने की कोशिश मेरी।

मैंने एक चयनकर्ता किया जो एक पी के अलावा कुछ होने के बाद तत्व से संबंधित है।

.here .is.the #selector h4 + * {...}

आशा है कि यह किसी को भी जो इसे पाता है मदद करता है :)


9
*शीर्षक में वर्णित किसी भी तत्व का उपयोग करते हुए । मेरे लिए एक सहायक अनुस्मारक था।
जेम्स ईजे

1
यह एकमात्र उत्तर है जो प्रश्न पर फिट बैठता है। अन्य उत्तरों को पूर्ववर्ती तत्व के प्रकार पर पूर्व ज्ञान की आवश्यकता होती है।
ह्यूगो विज्देवेल्ड

0

भिखारियों के लिए सरलता:

यदि आप किसी अन्य तत्व का चयन करने के तुरंत बाद किसी तत्व का चयन करना चाहते हैं +

उदाहरण के लिए:

div + p"+" तत्व उन सभी <p>तत्वों का चयन करता है जो तत्वों के तुरंत बाद रखे जाते <div>हैं


यदि आप चयनकर्ताओं के बारे में अधिक जानना चाहते हैं तो इस तालिका का उपयोग करें


0

मैं नवीनतम सीएसएस का उपयोग करता हूं और "+" मेरे लिए काम नहीं करता था इसलिए मैं समाप्त करता हूं

:पहला बच्चा

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.