css - सीएसएस '>' चयनकर्ता; यह क्या है?





css-selectors (7)


यह एक चाइल्ड सिलेक्टर है।

यह तब मेल खाता है जब कोई तत्व कुछ तत्व का बच्चा होता है। यह ">" से अलग दो या दो से अधिक चयनकर्ताओं से बना है।

उदाहरण):

निम्नलिखित नियम सभी पी तत्वों की शैली निर्धारित करता है जो शरीर के बच्चे हैं:

body > P { line-height: 1.3 }

उदाहरण):

निम्नलिखित उदाहरण वंशज चयनकर्ताओं और बाल चयनकर्ताओं को जोड़ता है:

div ol>li p

यह एक पी तत्व से मेल खाता है जो एक एलआई के वंशज है; एलआई तत्व एक ओएल तत्व का बच्चा होना चाहिए; ओएल तत्व एक डीआईवी के वंशज होना चाहिए। ध्यान दें कि ">" संयोजक के आस-पास वैकल्पिक सफेद स्थान छोड़ा गया है।

संभावित डुप्लिकेट:
सीएसएस नियमों में ">" का क्या अर्थ है?

मैंने कुछ बार "सीएसएस कोड" ( > ) में सीएसएस कोड में इस्तेमाल किया है, लेकिन मैं यह नहीं कर सकता कि यह क्या करता है। यह क्या करता है?




जैसा कि अन्य ने कहा है, यह एक प्रत्यक्ष बच्चा है, लेकिन यह ध्यान देने योग्य है कि यह केवल एक जगह छोड़ने के लिए अलग है ... किसी भी वंशज के लिए एक जगह है।

<div>
  <span>Some text</span>
</div>

div>span इससे मेल खाएगा, लेकिन यह इससे मेल नहीं खाएगा:

<div>
  <p><span>Some text</span></p>
</div>

उससे मेल खाने के लिए, आप div>p>span या div span




> सभी प्रत्यक्ष वंशज / बच्चों का चयन करता है

एक स्थान चयनकर्ता सभी गहरे वंशजों का चयन करेगा जबकि चयनकर्ता से अधिक होगा केवल सभी तत्काल वंशजों का चयन करेगा। उदाहरण के लिए बेवकूफ देखें।

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>




इसका मतलब माता-पिता / बच्चा है

उदाहरण:

एचटीएमएल> शरीर

यह कह रहा है कि शरीर एचटीएमएल का बच्चा है

जांचें: Selectors







> तत्काल बच्चों का चयन करता है

उदाहरण के लिए, यदि आपके पास इस तरह के नेस्टेड divs हैं:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

और आप अपनी स्टाइलशीट में एक सीएसएस नियम घोषित करते हैं जैसे:

.outer > div {
    ...
}

आपके नियम केवल उन divs पर लागू होंगे जिनके पास "मध्यम" वर्ग है क्योंकि उन divs वर्ग "बाहरी" वाले तत्वों के प्रत्यक्ष वंशज (तत्काल बच्चे) हैं (बेशक, आप इन नियमों को ओवरराइड करने वाले अन्य, अधिक विशिष्ट नियम घोषित करते हैं) । बेवकूफ देखें।

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

पक्षीय लेख

यदि आप, इसके बजाय, एक जगह थी इसके बजाय चयनकर्ताओं के बीच > , आपके नियम दोनों नेस्टेड divs पर लागू होंगे। अंतरिक्ष का अधिक सामान्य रूप से उपयोग किया जाता है और "वंश चयनकर्ता" को परिभाषित करता है, जिसका अर्थ यह है कि यह केवल तत्काल बच्चों की बजाय पेड़ के नीचे किसी मिलान तत्व को ढूंढता है।

नोट: > चयनकर्ता IE6 द्वारा समर्थित नहीं है। यह आईई 7 और आईई 8 सहित सभी अन्य मौजूदा ब्राउज़रों में काम करता है।

यदि आप कम-से-कम उपयोग किए जाने वाले सीएसएस चयनकर्ताओं की तलाश में हैं, तो आप + , ~ , और [attr] चयनकर्ताओं को भी देखना चाहते हैं, जिनमें से सभी बहुत उपयोगी हो सकते हैं।

इस पृष्ठ में सभी उपलब्ध चयनकर्ताओं की एक पूरी सूची है, साथ ही विभिन्न ब्राउज़रों में उनके समर्थन के विवरण (इसके मुख्य रूप से आईई जिसमें समस्याएं हैं), और उनके उपयोग के अच्छे उदाहरण हैं।




मुझे लगता है कि यह कोड काम करेगा क्योंकि प्लेसहोल्डर केवल इनपुट प्रकार टेक्स्ट के लिए आवश्यक है। तो यह एक पंक्ति सीएसएस आपकी ज़रूरत के लिए पर्याप्त होगा:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}




css css-selectors