CSS चयनकर्ता से ">" (अधिक से अधिक चिन्ह) क्या है?

475

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

div > p.some_class {
  /* Some declarations */
}

वास्तव में >संकेत का क्या अर्थ है?

css css-selectors

— मिशा मोरको
स्रोत

672

>है बच्चे Combinator , कभी कभी गलती से प्रत्यक्ष वंशज Combinator कहा जाता है। ¹

इसका मतलब है कि चयनकर्ता div > p.some_classकेवल उसी के पैराग्राफ का चयन करता है, .some_classजो सीधेdiv किसी के अंदर नेस्टेड होता है , न कि किसी ऐसे पैराग्राफ से, जिसे आगे नेस्टेड किया जाता है।

एक उदाहरण:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

क्या चुना गया है और क्या नहीं:

चयनित
यह p.some_classसीधे अंदर स्थित है div, इसलिए दोनों तत्वों के बीच एक अभिभावक-बच्चे का संबंध स्थापित होता है।
चयनित नहीं
यह स्वयं के बजाय, के भीतर p.some_classनिहित है। हालांकि यह एक वंशज है , यह एक बच्चा नहीं है; यह एक पोता है।blockquotedivdivp.some_classdiv

नतीजतन, div > p.some_classइस तत्व से मेल नहीं खाएंगे, बल्कि वंशज कॉम्बीनेटरdiv p.some_class का उपयोग करेंगे ।

¹ _{बहुत से लोग इसे "सीधा बच्चा" या "तत्काल बच्चा" कहने के लिए आगे बढ़ते हैं, लेकिन यह पूरी तरह से अनावश्यक है (और मेरे लिए अविश्वसनीय रूप से कष्टप्रद है), क्योंकि एक बाल तत्व वैसे भी परिभाषा से तत्काल है , इसलिए उनका मतलब वही है। "अप्रत्यक्ष बच्चे" जैसी कोई चीज नहीं है।}

— बोल्टकॉक
स्रोत

2

+1 क्या इसे वास्तव में चाइल्ड सिलेक्टर कहा जाता है ? यदि हां, तो यह बहुत भ्रामक है। मैंने सोचा था #something aकि एक बच्चे का चयनकर्ता होगा।

— एलेक्स

2

@alex: हाँ :) #something aका मतलब aएक पोता या महान ^ n पोता हो सकता है #something(यह घोंसले के शिकार की गहराई में नहीं है)।

— बोल्टकॉक

12

@alex इसे चाइल्ड कॉम्बीनेटर कहा जाता है , अंतरिक्ष को वंशज कॉम्बिनेटर

— रोबर्टेक

33

जब कोई उनके दादा-दादी का बच्चा होता है, तो हम अनाचार का बहुत बुरा उदाहरण देते हैं। खुशी से, कि HTML में असंभव है।

— क्वेंटिन

8

मैं किसी भी आम आदमी को स्पष्टता के लिए अपने बच्चों को अपने सीधे बच्चों को बुलाते नहीं सुनता।

— BoltClock

41

> (अधिक से अधिक संकेत) एक सीएसएस संयोजक है।

एक कॉम्बिनेटर एक ऐसी चीज है जो चयनकर्ताओं के बीच संबंधों को समझाती है।

CSS चयनकर्ता में एक से अधिक सरल चयनकर्ता हो सकते हैं। सरल चयनकर्ताओं के बीच, हम एक संयोजन शामिल कर सकते हैं।

CSS3 में चार अलग-अलग कॉम्बिनेटर हैं:

वंशज चयनकर्ता (स्थान)
बच्चे का चयनकर्ता (>)
आसन्न भाई चयनकर्ता (+)
सामान्य भाई चयनकर्ता (~)

नोट: < CSS चयनकर्ताओं में मान्य नहीं है।

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

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

आउटपुट:

CSS Combinators के बारे में अधिक जानकारी

— Premraj
स्रोत

developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/…

— ललित यादव

@premraj अभिभावक-बाल सीएसएस चयनकर्ताओं के उत्कृष्ट स्पष्टीकरण के लिए धन्यवाद!

— YCode

इसका क्या मतलब है जब आप कुछ ऐसा प्राप्त करते हैं .entry-content > * {"code" }जिसके बाद होता है .entry-content {"other code" }? के .entry-content > *सभी बच्चों को कवर नहीं करता है entry-content?

— YCode

14

जैसा कि दूसरों का उल्लेख है, यह एक बच्चा चयनकर्ता है। यहाँ उचित लिंक है।

http://www.w3.org/TR/CSS2/selector.html#child-selectors

— डग नबबट
स्रोत

लिंक के लिए आपका बहुत - बहुत धन्यवाद ! मैंने वहां "आसन्न सिबलिंग चयनकर्ताओं" की भी खोज की।

— मीशा मोरशको

आपको साइटपॉइंट पर ब्राउज़र का समर्थन मिलेगा । IE6 में काम नहीं करता है अगर यह आपकी परियोजनाओं के लिए मायने रखता है, तो हर जगह ठीक है। यह संसाधन जासूसी है। भाई-बहनों के लिए उपयोगी: nth-child () आदि जहाँ समर्थन अभी भी अधूरा है

— FelipeAls

10

यह उन pतत्वों के साथ मेल खाता है some_classजो सीधे एक के तहत हैं div।

— dan04
स्रोत

5

pकक्षा के साथ सभी टैग some_classजो एक divटैग के सीधे बच्चे हैं ।

— tschaible
स्रोत

4

एचटीएमएल

<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>

सीएसएस

div > p.some_class{
    color:red;
}

जितने भी प्रत्यक्ष बच्चे हैं <p>, .some_classउन पर लागू शैली मिल जाएगी।

— सूरज रावत
स्रोत

3

(चाइल्ड सिलेक्टर) को css2 में पेश किया गया था। div p {} सभी p तत्वों का चयन करें, जो div तत्वों के डिकेडेंट हैं, जबकि div> p केवल चाइल्ड p एलिमेंट्स का चयन करता है, न कि ग्रैंड चाइल्ड, ग्रेट ग्रैंड बच्चे का।

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

CSS Ce [लेक्टर्स और उनके उपयोग के बारे में अधिक जानकारी के लिए, मेरे ब्लॉग, css चयनकर्ताओं और css3 चयनकर्ताओं की जाँच करें

— अविनाश मल्होत्रा
स्रोत

0

CSS में बड़े हस्ताक्षर (>) चयनकर्ता का अर्थ है कि दाईं ओर का चयनकर्ता बाईं ओर जो कुछ भी है उसका प्रत्यक्ष वंशज / बच्चा है।

एक उदाहरण:

article > p { }

मतलब केवल एक अनुच्छेद को स्टाइल करता है जो एक लेख के बाद आता है।

— authentichigh
स्रोत