CSS => चयनकर्ताओं

परिचय

CSS चयनकर्ता विशिष्ट HTML तत्वों को CSS शैलियों के लिए लक्ष्य के रूप में पहचानते हैं। यह विषय कवर करता है कि CSS चयनकर्ता HTML तत्वों को कैसे लक्षित करते हैं। चयनकर्ता सीएसएस भाषा द्वारा प्रस्तावित 50 से अधिक चयन विधियों की एक विस्तृत श्रृंखला का उपयोग करते हैं, जिनमें तत्व, वर्ग, आईडी, छद्म तत्व और छद्म वर्ग और पैटर्न शामिल हैं।

वाक्य - विन्यास

# आई.डी.
। कक्षा का नाम
: छद्म वर्गनाम
:: छद्म तत्वनाम
[ Attr ] / * में attr विशेषता है। * /
[ attr = " value "] / * में attr विशेषता होती है, और इसका मान बिल्कुल " value " होता है। * /
[Attr ~ = "मूल्य"] / * attr विशेषता है, और अपने मूल्य, जब खाली स्थान के पर विभाजन, "मूल्य" शामिल है। * /
[ attr | = " value "] / * में attr विशेषता है, और इसका मान बिल्कुल " value " है, या इसका मान " value - " से शुरू होता है। * /
[ attr ^ = " value "] / * में attr विशेषता है, और इसका मान " value " से शुरू होता है। * /
[ Attr $ = " value "] / * में attr विशेषता है, और इसका मान " value " के साथ समाप्त होता है। * /
[ attr * = " value "] / * में attr विशेषता होती है, और इसके मूल्य में " value " होती है। * /
तत्व-नाम
*

टिप्पणियों

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

चयनकर्ताओं को आकर्षित करें

अवलोकन

गुण चयनकर्ताओं का उपयोग विभिन्न प्रकार के ऑपरेटरों के साथ किया जा सकता है जो चयन मानदंडों को तदनुसार बदलते हैं। वे किसी दिए गए विशेषता या विशेषता मान की उपस्थिति का उपयोग करके एक तत्व का चयन करते हैं।

चयनकर्ता ⁽¹⁾	मिलान किया गया तत्व	तत्वों का चयन करता है ...	सीएसएस संस्करण
`[attr]`	`<div attr>`	विशेषता `attr` साथ	2
`[attr='val']`	`<div attr="val">`	जहां विशेषता `attr` में `val`	2
`[attr~='val']`	`<div attr="val val2 val3">`	जहां `val` दिखाई देती है के खाली स्थान के अलग की गई सूची `attr`	2
`[attr^='val']`	`<div attr="val1 val2">`	कहाँ `attr` के मूल्य के साथ शुरू होता `val`	3
`[attr$='val']`	`<div attr="sth aval">`	जहां `attr` का मान `val` साथ समाप्त होता है	3
`[attr*='val']`	`<div attr="somevalhere">`	जहां `attr` में कहीं भी `val` होता है	3
`[attr\|='val']`	`<div attr="val-sth etc">`	जहां `attr` का मूल्य बिल्कुल `val` , या `val` और तुरंत शुरू होता है इसके बाद `-` (U + 002D)	2
`[attr='val' i]`	`<div attr="val">`	जहां `attr` में `val` , `val` पत्र को अनदेखा करना।	4 ⁽²⁾

टिप्पणियाँ:

विशेषता मान को सिंगल-कोट्स या डबल-कोट्स से घिरा जा सकता है। कोई भी उद्धरण काम नहीं कर सकता है, लेकिन यह CSS मानक के अनुसार मान्य नहीं है, और इसे हतोत्साहित किया जाता है।
कोई एकल, एकीकृत CSS4 विनिर्देश नहीं है, क्योंकि यह अलग-अलग मॉड्यूल में विभाजित है। हालांकि, "स्तर 4" मॉड्यूल हैं। ब्राउज़र समर्थन देखें ।

विवरण

`[attribute]`

दिए गए विशेषता के साथ तत्वों का चयन करता है।

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute="value"]`

दिए गए विशेषता और मूल्य के साथ तत्वों का चयन करता है।

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute*="value"]`

दिए गए विशेषता और मूल्य वाले तत्वों का चयन करता है जहां दिए गए विशेषता में कहीं भी दिए गए मूल्य (एक विकल्प के रूप में) शामिल हैं।

[class*="foo"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo123">This will be red</div>
<div class="bar123foo">This will be red</div>
<div class="barfooo123">This will be red</div>
<div class="barfo0">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute~="value"]`

दिए गए विशेषता और मूल्य वाले तत्वों का चयन करता है जहां दिए गए मूल्य एक व्हाट्सएप-अलग सूची में दिखाई देते हैं।

[class~="color-red"] {
  color: red;
}

<div class="color-red foo-bar the-div">This will be red</div>
<div class="color-blue foo-bar the-div">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute^="value"]`

दिए गए विशेषता और मूल्य के साथ उन तत्वों का चयन करता है जहां दी गई विशेषता मूल्य से शुरू होती है।

[class^="foo-"] {
  color: red;
}

<div class="foo-123">This will be red</div>
<div class="foo-234">This will be red</div>
<div class="bar-123">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute$="value"]`

दिए गए विशेषता और मूल्य वाले तत्वों का चयन करता है जहां दिए गए विशेषता दिए गए मूल्य के साथ समाप्त होते हैं।

[class$="file"] {
  color: red;
}

<div class="foobar-file">This will be red</div>
<div class="foobar-file">This will be red</div>
<div class="foobar-input">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute|="value"]`

किसी दिए गए विशेषता और मूल्य वाले तत्वों का चयन करता है, जहां विशेषता का मूल्य दिए गए मूल्य के बराबर है या उसके बाद दिए गए मूल्य का सही मूल्य है - (U + 002D)

[lang|="EN"] {
  color: red;
}

<div lang="EN-us">This will be red</div>
<div lang="EN-gb">This will be red</div>
<div lang="PT-pt">This will NOT be red</div>

JSBin पर लाइव डेमो

`[attribute="value" i]`

किसी दिए गए विशेषता और मूल्य वाले तत्वों का चयन करता है जहां विशेषता के मूल्य को Value , VALUE , vAlUe या किसी अन्य मामले-असंवेदनशील संभावना के रूप में दर्शाया जा सकता है।

[lang="EN" i] {
  color: red;
}

<div lang="EN">This will be red</div>
<div lang="en">This will be red</div>
<div lang="PT">This will NOT be red</div>

JSBin पर लाइव डेमो

विशेषता चयनकर्ताओं की विशिष्टता

`0-1-0`

वर्ग चयनकर्ता और छद्मकोश के रूप में भी।

*[type=checkbox] // 0-1-0

ध्यान दें कि इसका मतलब यह है कि एक विशेषता चयनकर्ता का उपयोग इसकी आईडी की विशिष्टता के निचले स्तर पर एक तत्व का चयन करने के लिए किया जा सकता है जैसे कि यह एक आईडी चयनकर्ता के साथ चुना गया था: [id="my-ID"] उसी तत्व को लक्षित करता है जैसे कि #my-ID लेकिन कम विशिष्टता के साथ।

अधिक विवरण के लिए सिंटैक्स अनुभाग देखें।

combinators

अवलोकन

चयनकर्ता	विवरण
`div span`	वंशज चयनकर्ता (सभी `<span>` s जो एक `<div>` वंशज हैं)
`div > span`	चाइल्ड सिलेक्टर (सभी `<span>` s जो कि प्रत्यक्ष बच्चे हैं `<div>` )
`a ~ span`	जनरल सहोदर चयनकर्ता (सभी `<span>` रों है कि एक के बाद भाई बहन हैं `<a>` )
`a + span`	समीपवर्ती सिबलिंग चयनकर्ता (सभी `<span>` s जो एक `<a>` तुरंत बाद हैं)

नोट: सिबलिंग चयनकर्ता उन तत्वों को लक्षित करते हैं जो स्रोत दस्तावेज़ में उनके बाद आते हैं। सीएसएस, अपनी प्रकृति (यह कैस्केड) द्वारा, पिछले या मूल तत्वों को लक्षित नहीं कर सकता है। हालांकि, फ्लेक्स order प्रॉपर्टी का उपयोग करके, पिछले सिबलिंग चयनकर्ता को दृश्य मीडिया पर सिम्युलेटेड किया जा सकता है ।

वंशज संयोजक: `selector selector`

एक वंशज कॉम्बिनेटर, जिसका प्रतिनिधित्व कम से कम एक अंतरिक्ष चरित्र ( ), उन तत्वों का चयन करता है जो परिभाषित तत्व के वंशज हैं। यह कॉम्बिनेटर तत्व के सभी वंशज (नीचे बच्चे तत्वों से) का चयन करता है।

div p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is red</p>
  </section>
</div>

<p>My text is not red</p>

JSBin पर लाइव डेमो

उपरोक्त उदाहरण में, पहले दो <p> तत्व चुने गए हैं क्योंकि वे दोनों <div> वंशज हैं।

बाल संयोजक: `selector > selector`

बच्चे ( > ) कॉम्बिनेटर का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जो निर्दिष्ट तत्व के बच्चे , या प्रत्यक्ष वंशज हैं ।

div > p {
  color:red;
}

<div>
  <p>My text is red</p>
  <section>
    <p>My text is not red</p>
  </section>
</div>

JSBin पर लाइव डेमो

उपरोक्त सीएसएस केवल पहले <p> तत्व का चयन करता है, क्योंकि यह एकमात्र पैराग्राफ है जो सीधे <div> ।

दूसरा <p> तत्व चयनित नहीं है क्योंकि यह <div> का प्रत्यक्ष बच्चा नहीं है।

आसन्न सिबलिंग संयोजक: `selector + selector`

आसन्न सिबलिंग ( + ) कॉम्बिनेटर एक सिबलिंग तत्व का चयन करता है जो तत्काल एक निर्दिष्ट तत्व का अनुसरण करता है।

p + p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<p>My text is red</p>
<hr>
<p>My text is not red</p>

JSBin पर लाइव डेमो

उपरोक्त उदाहरण केवल उन <p> तत्वों का चयन करता है जो सीधे दूसरे <p> तत्व से पहले होते हैं ।

सामान्य सिबलिंग संयोजक: `selector ~ selector`

सामान्य भाई-बहन ( ~ ) कॉम्बिनेटर उन सभी भाई-बहनों का चयन करता है जो निर्दिष्ट तत्व का पालन करते हैं।

p ~ p {
  color:red;
}

<p>My text is not red</p>
<p>My text is red</p>
<hr>
<h1>And now a title</h1>
<p>My text is red</p>

JSBin पर लाइव डेमो

उपरोक्त उदाहरण सभी <p> तत्वों का चयन करता है, जो दूसरे <p> तत्व से पहले होते हैं, चाहे वे तुरंत आसन्न हों या न हों।

वर्ग का नाम चयनकर्ताओं

वर्ग नाम चयनकर्ता लक्षित वर्ग नाम के साथ सभी तत्वों का चयन करता है। उदाहरण के लिए, वर्ग नाम .warning निम्नलिखित <div> तत्व का चयन करेगा:

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

आप तत्वों को विशेष रूप से लक्षित करने के लिए वर्ग नामों को भी जोड़ सकते हैं। अधिक जटिल वर्ग चयन दिखाने के लिए ऊपर दिए गए उदाहरण पर निर्माण करते हैं।

सीएसएस

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

एचटीएमएल

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

इस उदाहरण में, के साथ सभी तत्वों .warning वर्ग एक नीले पाठ का रंग, साथ तत्वों होगा .important साथ एक नारंगी पाठ का रंग है वर्ग, और सभी तत्वों दोनों है .important और .warning वर्ग के नाम एक लाल पाठ होगा रंग।

ध्यान दें कि सीएसएस के भीतर .warning.important घोषणा में दो वर्ग नामों के बीच कोई स्थान नहीं था। इसका मतलब यह है कि इसमें केवल ऐसे तत्व मिलेंगे जिनमें वर्ग नाम warning और उनकी class विशेषता दोनों important । वे वर्ग नाम तत्व पर किसी भी क्रम में हो सकते हैं।

एक अंतरिक्ष सीएसएस घोषणा में दो वर्गों के बीच शामिल किया गया था, तो वह केवल तत्व है कि एक साथ माता पिता तत्वों का चयन करेंगे .warning वर्ग के नाम और साथ बच्चे तत्वों .important वर्ग के नाम।

आईडी चयनकर्ताओं

आईडी चयनकर्ता लक्षित आईडी के साथ DOM तत्वों का चयन करते हैं। CSS में एक विशिष्ट आईडी द्वारा एक तत्व का चयन करने के लिए, # उपसर्ग का उपयोग किया जाता है।

उदाहरण के लिए, निम्नलिखित HTML div तत्व…

<div id="exampleID">
    <p>Example</p>
</div>

… सीएसएस में #exampleID द्वारा चुना जा सकता है जैसा कि नीचे दिखाया गया है:

#exampleID {
    width: 20px;
}

नोट : HTML ऐनक एक ही आईडी के साथ कई तत्वों की अनुमति नहीं देता है

छद्म कक्षाएं

छद्म-कक्षाएं ऐसे कीवर्ड हैं जो दस्तावेज़ के पेड़ के बाहर स्थित जानकारी के आधार पर चयन की अनुमति देते हैं या जिसे अन्य चयनकर्ताओं या कॉम्बेटर्स द्वारा व्यक्त नहीं किया जा सकता है। यह जानकारी एक निश्चित राज्य ( राज्य और गतिशील छद्म-वर्ग), स्थानों ( संरचनात्मक और लक्ष्य छद्म-वर्ग) से जुड़ी हो सकती है, पूर्व ( नकारा छद्म-वर्ग) की नकारात्मकता या भाषाओं ( लैंग पोडो-क्लास) के लिए। उदाहरणों में शामिल हैं कि क्या किसी लिंक का अनुसरण किया गया है या नहीं ( :visited ), माउस एक तत्व से अधिक है ( :hover ), एक चेकबॉक्स चेक किया गया है ( :checked ), आदि।

वाक्य - विन्यास

selector:pseudo-class { 
    property: value;
}

छद्म वर्गों की सूची:

नाम	विवरण
`:active`	उपयोगकर्ता द्वारा सक्रिय किए जा रहे (यानी क्लिक किए गए) किसी भी तत्व पर लागू होता है।
`:any`	आपको उन समूहों का निर्माण करके संबंधित चयनकर्ताओं के सेट बनाने की अनुमति देता है जो शामिल किए गए आइटम मेल खाएंगे। यह संपूर्ण चयनकर्ता को दोहराने का एक विकल्प है।
`:target`	वर्तमान सक्रिय #news तत्व का चयन करता है (एक URL पर क्लिक किया गया उस लंगर नाम वाले)
`:checked`	रेडियो, चेकबॉक्स या विकल्प तत्वों की जाँच की जाती है या "चालू" स्थिति में टॉगल किया गया।
`:default`	किसी भी उपयोगकर्ता इंटरफ़ेस तत्व का प्रतिनिधित्व करता है जो समूह के बीच डिफ़ॉल्ट है समान तत्व।
`:disabled`	किसी भी UI तत्व पर लागू होता है जो अक्षम अवस्था में है।
`:empty`	ऐसे किसी भी तत्व पर लागू होता है, जिसकी कोई संतान नहीं है।
`:enabled`	किसी भी UI तत्व पर लागू होता है जो सक्षम स्थिति में है।
`:first`	`@page` नियम के साथ संयोजन में उपयोग किया जाता है, यह पहले पृष्ठ का चयन करता है a मुद्रित दस्तावेज़।
`:first-child`	किसी भी तत्व का प्रतिनिधित्व करता है जो अपने माता-पिता का पहला बच्चा तत्व है।
`:first-of-type`	तब लागू होता है जब कोई तत्व चयनित तत्व प्रकार में से पहला होता है इसके माता-पिता के अंदर। यह पहला बच्चा हो भी सकता है और नहीं भी।
`:focus`	किसी भी तत्व पर लागू होता है जिसमें उपयोगकर्ता का ध्यान केंद्रित होता है। यह द्वारा दिया जा सकता है उपयोगकर्ता के कीबोर्ड, माउस ईवेंट या अन्य प्रकार के इनपुट।
`:focus-within`	एक पूरे खंड को उजागर करने के लिए इस्तेमाल किया जा सकता है जब इसके अंदर एक तत्व केंद्रित होता है। यह किसी भी तत्व से मेल खाता है: ध्यान केंद्रित छद्म श्रेणी के मैच या जिसमें एक वंशज केंद्रित है।
`:full-screen`	फुल-स्क्रीन मोड में प्रदर्शित किसी भी तत्व पर लागू होता है। यह पूरे स्टैक का चयन करता है तत्वों और न केवल शीर्ष स्तर के तत्व।
`:hover`	उपयोगकर्ता के पॉइंटिंग डिवाइस द्वारा मंडराए जा रहे किसी भी तत्व पर लागू होता है, लेकिन सक्रिय नहीं।
`:indeterminate`	रेडियो या चेकबॉक्स यूआई तत्वों को लागू करता है जो न तो चेक किए जाते हैं और न ही अनियंत्रित, लेकिन एक अनिश्चित स्थिति में हैं। यह एक के कारण हो सकता है तत्व की विशेषता या DOM हेरफेर।
`:in-range`	`:in-range` सीएसएस छद्म श्रेणी मैच एक तत्व है जब इस तत्व के लिए निर्दिष्ट सीमा सीमाओं के अंदर इसकी मूल्य विशेषता। यह पृष्ठ को एक प्रतिक्रिया देने की अनुमति देता है जो वर्तमान में परिभाषित मूल्य है तत्व का उपयोग सीमा सीमा के अंदर है।
`:invalid`	`<input>` तत्वों पर लागू होता है जिनके मान अमान्य हैं प्रकार में निर्दिष्ट `type=` विशेषता।
`:lang`	किसी भी तत्व पर लागू होता है जो लपेटता है `<body>` तत्व का ठीक से उपयोग किया जाता है निर्दिष्ट `lang=` विशेषता। छद्म वर्ग के मान्य होने के लिए, यह आवश्यक है एक मान्य दो या तीन अक्षर भाषा कोड होते हैं।
`:last-child`	किसी भी तत्व का प्रतिनिधित्व करता है जो अपने माता-पिता का अंतिम बच्चा तत्व है।
`:last-of-type`	लागू होता है जब कोई तत्व चयनित तत्व प्रकार के अंदर होता है इसके जनक। यह अंतिम संतान हो भी सकती है और नहीं भी।
`:left`	`@page` नियम के साथ संयोजन में उपयोग किया जाता है, यह सभी बाईं ओर का चयन करता है एक मुद्रित दस्तावेज़ में पृष्ठ।
`:link`	किसी भी लिंक पर लागू होता है जो उपयोगकर्ता द्वारा नहीं देखा गया है।
`:not()`	उन सभी तत्वों पर लागू होता है जो पास किए गए मूल्य से मेल नहीं खाते हैं (उदाहरण के लिए `:not(p)` या `:not(.class-name)` । इसका मान होना आवश्यक है मान्य है और इसमें केवल एक चयनकर्ता हो सकता है। हालाँकि, आप कई श्रृंखला कर सकते हैं `:not` चयनकर्ताओं को एक साथ `:not` ।
`:nth-child`	जब कोई तत्व अपने मूल का `n` -थ तत्व होता है, तो `n` एक पूर्णांक, एक गणितीय अभिव्यक्ति (जैसे `n+3` ) या कीवर्ड हो सकते हैं `odd` या `even` ।
`:nth-of-type`	तब लागू होता है जब कोई तत्व इसके मूल का `n` -थ तत्व होता है एक ही तत्व प्रकार, जहां `n` एक पूर्णांक, एक गणितीय हो सकता है व्यंजक (उदाहरण `n+3` ) या खोजशब्द `odd` या `even` ।
`:only-child`	`:only-child` सीएसएस छद्म वर्ग किसी भी तत्व का प्रतिनिधित्व करता है जो अपने माता-पिता की इकलौती संतान है। यह भी ऐसा ही है `:first-child:last-child` या `:nth-child(1):nth-last-child(1)` , लेकिन कम विशिष्टता के साथ।
`:optional`	`:optional` सीएसएस छद्म वर्ग किसी भी तत्व का प्रतिनिधित्व करता है उस पर आवश्यक विशेषता सेट नहीं है। यह अनुमति देता है वैकल्पिक फ़ील्ड को आसानी से इंगित करने और तदनुसार शैली बनाने के लिए फ़ॉर्म।
`:out-of-range`	जब कोई तत्व होता है, तो `:out-of-range` सीएसएस छद्म श्रेणी से मेल खाती है इस तत्व के लिए निर्दिष्ट सीमा सीमाओं के बाहर मूल्य विशेषता। यह पृष्ठ को एक प्रतिक्रिया देने की अनुमति देता है जो वर्तमान में परिभाषित मूल्य का उपयोग कर रहा है तत्व सीमा के बाहर है। मान किसी श्रेणी के बाहर हो सकता है यदि वह है अधिकतम या न्यूनतम सेट मानों की तुलना में छोटा या बड़ा।
`:placeholder-shown`	प्रायोगिक। वर्तमान में प्लेसहोल्डर पाठ प्रदर्शित करने वाले किसी भी रूप तत्व पर लागू होता है।
`:read-only`	किसी भी तत्व पर लागू होता है जो उपयोगकर्ता द्वारा संपादन योग्य नहीं है।
`:read-write`	किसी भी तत्व पर लागू होता है जो उपयोगकर्ता द्वारा संपादन योग्य है, जैसे `<input>` तत्व।
`:right`	`@page` नियम के साथ संयोजन में उपयोग किया जाता है, यह सभी सही पृष्ठों का चयन करता है a मुद्रित दस्तावेज़।
`:root`	दस्तावेज़ का प्रतिनिधित्व करने वाले पेड़ के मूल तत्व से मेल खाता है।
`:scope`	CSS pseudo-class उन तत्वों से मेल खाता है जो एक संदर्भ हैं चयनकर्ताओं के खिलाफ मैच के लिए बिंदु।
`:target`	वर्तमान सक्रिय #news तत्व का चयन करता है (एक URL पर क्लिक किया गया उस एंकर का नाम)
`:visited`	उपयोगकर्ता द्वारा देखे गए किसी भी लिंक पर लागू होता है।

The :visited किए :visited pseudoclass का उपयोग अब बहुत सारे आधुनिक ब्राउज़रों में स्टाइल के लिए नहीं किया जा सकता है क्योंकि यह एक सुरक्षा छेद है। संदर्भ के लिए यह लिंक देखें।

मूल चयनकर्ता

चयनकर्ता	विवरण
`*`	यूनिवर्सल चयनकर्ता (सभी तत्व)
`div`	टैग चयनकर्ता (सभी `<div>` तत्व)
`.blue`	वर्ग चयनकर्ता (वर्ग `blue` साथ सभी तत्व)
`.blue.red`	वर्ग `blue` और `red` `blue` सभी तत्व (एक प्रकार का यौगिक चयनकर्ता)
`#headline`	आईडी चयनकर्ता ( `headline` लिए "आईडी" विशेषता वाला तत्व)
`:pseudo-class`	छद्म वर्ग वाले सभी तत्व
`::pseudo-element`	तत्व जो छद्म तत्व से मेल खाता है
`:lang(en)`	तत्व जो मेल खाता है: लैंग डिक्लेरेशन, उदाहरण के लिए `<span lang="en">`
`div > p`	बच्चा चयनकर्ता

नोट: एक आईडी का मूल्य एक वेब पेज में अद्वितीय होना चाहिए। यह एक ही दस्तावेज़ के पेड़ में एक से अधिक बार आईडी के मूल्य का उपयोग करने के लिए HTML मानक का उल्लंघन है।

चयनकर्ताओं की एक पूरी सूची CSS चयनकर्ता स्तर 3 विनिर्देशन में पाई जा सकती है।

कैसे एक रेंज इनपुट शैली के लिए

एचटीएमएल

<input type="range"></input>

सीएसएस

प्रभाव	छद्म चयनकर्ता
अंगूठा	`input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumb`
धावन पथ	`input[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=range]::-ms-track`
पर ध्यान केंद्रित	`input[type=range]:focus`
ट्रैक का निचला हिस्सा	`input[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower` (वर्तमान में WebKit ब्राउज़रों में संभव नहीं है - JS आवश्यक)

चेकबॉक्स के साथ ग्लोबल बूलियन: चेक किया गया और ~ (सामान्य सहोदर कॉम्बिनेटर)

~ चयनकर्ता के साथ, आप जावास्क्रिप्ट का उपयोग किए बिना आसानी से एक वैश्विक सुलभ बूलियन को लागू कर सकते हैं।

चेकबॉक्स के रूप में बूलियन जोड़ें

अपने दस्तावेज़ की शुरुआत में, एक अद्वितीय id और hidden विशेषता सेट के साथ उतने ही बूलियन जोड़ें।

<input type="checkbox" id="sidebarShown" hidden />
<input type="checkbox" id="darkThemeUsed" hidden />

<!-- here begins actual content, for example: -->
<div id="container">
    <div id="sidebar">
        <!-- Menu, Search, ... -->
    </div>

    <!-- Some more content ... -->
</div>

<div id="footer">
    <!-- ... -->
</div>

बूलियन का मान बदलें

आप विशेषता सेट के for एक label जोड़कर बूलियन को टॉगल कर सकते हैं:

<label for="sidebarShown">Show/Hide the sidebar!</label>

सीएसएस के साथ बूलियन मूल्य तक पहुँचना

सामान्य चयनकर्ता (जैसे। .color-red ) डिफ़ॉल्ट गुणों को निर्दिष्ट करता है। उन्हें true / false चयनकर्ताओं के द्वारा ओवरराइड किया जा सकता है:

/* true: */
<checkbox>:checked ~ [sibling of checkbox & parent of target] <target>

/* false: */
<checkbox>:not(:checked) ~ [sibling of checkbox & parent of target] <target>

ध्यान दें कि <checkbox> , [sibling ...] और <target> को उचित चयनकर्ताओं द्वारा प्रतिस्थापित किया जाना चाहिए। [sibling ...] एक विशिष्ट चयनकर्ता हो सकता है, (अक्सर यदि आप आलसी हैं) बस * या कुछ भी नहीं अगर लक्ष्य पहले से ही चेकबॉक्स का सहोदर है।

उपरोक्त HTML संरचना के उदाहरण निम्न होंगे:

#sidebarShown:checked ~ #container #sidebar {
    margin-left: 300px;
}

#darkThemeUsed:checked ~ #container,
#darkThemeUsed:checked ~ #footer {
    background: #333;
}

कार्रवाई में

इन वैश्विक बुलियन के क्रियान्वयन के लिए इस फिडेल को देखें।

CSS3: इन-रेंज चयनकर्ता उदाहरण

<style>
input:in-range {
    border: 1px solid blue;
}
</style>



<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

जब कोई तत्व इस तत्व के लिए निर्दिष्ट सीमा सीमाओं के अंदर अपनी वैल्यू विशेषता रखता है तो :in-range सीएसएस छद्म-वर्ग मेल खाता है। यह पृष्ठ को एक प्रतिक्रिया देने की अनुमति देता है कि तत्व का उपयोग करके वर्तमान में परिभाषित मूल्य सीमा सीमाओं के अंदर है। [1]

बाल छद्म वर्ग

": Nth-child (a + b) CSS pseudo-class एक तत्व से मेल खाता है, जो दस्तावेज़ ट्री में इससे पहले एक + b-1 भाई-बहन है, n के लिए दिए गए सकारात्मक या शून्य मान के लिए" - MDN: nth-child

छद्म चयनकर्ता	1	2	3	4	5	6	7	8	9	10
`:first-child`	✔
`:nth-child(3)`			✔
`:nth-child(n+3)`			✔	✔	✔	✔	✔	✔	✔	✔
`:nth-child(3n)`			✔			✔			✔
`:nth-child(3n+1)`	✔			✔			✔			✔
`:nth-child(-n+3)`	✔	✔	✔
`:nth-child(odd)`	✔		✔		✔		✔		✔
`:nth-child(even)`		✔		✔		✔		✔		✔
`:last-child`										✔
`:nth-last-child(3)`								✔

आईडी चयनकर्ता की उच्च विशिष्टता के बिना उसकी आईडी का उपयोग करने वाले तत्व का चयन करें

यह ट्रिक आपको ID चयनकर्ता की उच्च विशिष्टता से बचने के लिए एक विशेषता चयनकर्ता के लिए मान के रूप में ID का उपयोग करते हुए एक तत्व का चयन करने में मदद करता है।

HTML:

<div id="element">...</div>

सीएसएस

#element { ... } /* High specificity will override many selectors */

[id="element"] { ... } /* Low specificity, can be overridden easily */

ए: छद्म श्रेणी का उदाहरण नहीं और बी: सीएसएस के छद्म वर्ग के भीतर ध्यान केंद्रित

A. वाक्य-विन्यास ऊपर प्रस्तुत किया गया है।

निम्नलिखित चयनकर्ता से मेल खाता सभी <input> एक HTML दस्तावेज में तत्वों को विकलांग नहीं हैं और वर्ग की जरूरत नहीं है .example :

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

सीएसएस:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

:not() छद्म वर्ग चयनकर्ताओं स्तर 4 में अल्पविराम से अलग किए गए चयनकर्ताओं का भी समर्थन करेगा:

सीएसएस:

input:not([disabled], .example){
   background-color: #ccc;
}

JSBin पर लाइव डेमो

यहाँ पृष्ठभूमि वाक्यविन्यास देखें।

बी: सीएसएस छद्म वर्ग के भीतर ध्यान केंद्रित

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

सीएसएस:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

: केवल-बाल छद्म वर्ग चयनकर्ता उदाहरण

:only-child CSS छद्म वर्ग किसी भी तत्व का प्रतिनिधित्व करता है जो अपने माता-पिता का एकमात्र बच्चा है।

HTML:

<div>
  <p>This paragraph is the only child of the div, it will have the color blue</p>
</div>

<div>
  <p>This paragraph is one of the two children of the div</p>
  <p>This paragraph is one of the two children of its parent</p>
</div>

सीएसएस:

p:only-child {
  color: blue;
}

उपरोक्त उदाहरण <p> तत्व का चयन करता है जो अपने माता-पिता से अद्वितीय बच्चा है, इस मामले में एक <div> ।

JSBin पर लाइव डेमो

The: अंतिम प्रकार का चयनकर्ता

:last-of-type उस तत्व का चयन करता है, जो अपने माता-पिता का, किसी विशेष प्रकार का अंतिम बच्चा है। नीचे दिए गए उदाहरण में, css अंतिम पैराग्राफ और अंतिम शीर्ष h1 का चयन करता है।

p:last-of-type { 
  background: #C5CAE9; 
}
h1:last-of-type { 
  background: #CDDC39; 
}

<div class="container">
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <p>Last paragraph</p>
    <h1>Heading 1</h1>
    <h2>First heading 2</h2>
    <h2>Last heading 2</h2>
</div>

jsFiddle

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

परिचय

वाक्य - विन्यास

टिप्पणियों

चयनकर्ताओं को आकर्षित करें

अवलोकन

विवरण

[attribute]

[attribute="value"]

[attribute*="value"]

[attribute~="value"]

[attribute^="value"]

[attribute$="value"]

[attribute|="value"]

[attribute="value" i]

विशेषता चयनकर्ताओं की विशिष्टता

0-1-0

combinators

अवलोकन

वंशज संयोजक: selector selector

बाल संयोजक: selector > selector

आसन्न सिबलिंग संयोजक: selector + selector

सामान्य सिबलिंग संयोजक: selector ~ selector

वर्ग का नाम चयनकर्ताओं

आईडी चयनकर्ताओं

छद्म कक्षाएं

वाक्य - विन्यास

छद्म वर्गों की सूची:

मूल चयनकर्ता

कैसे एक रेंज इनपुट शैली के लिए

चेकबॉक्स के साथ ग्लोबल बूलियन: चेक किया गया और ~ (सामान्य सहोदर कॉम्बिनेटर)

चेकबॉक्स के रूप में बूलियन जोड़ें

बूलियन का मान बदलें

सीएसएस के साथ बूलियन मूल्य तक पहुँचना

कार्रवाई में

CSS3: इन-रेंज चयनकर्ता उदाहरण

बाल छद्म वर्ग

आईडी चयनकर्ता की उच्च विशिष्टता के बिना उसकी आईडी का उपयोग करने वाले तत्व का चयन करें

ए: छद्म श्रेणी का उदाहरण नहीं और बी: सीएसएस के छद्म वर्ग के भीतर ध्यान केंद्रित

: केवल-बाल छद्म वर्ग चयनकर्ता उदाहरण

The: अंतिम प्रकार का चयनकर्ता

`[attribute]`

`[attribute="value"]`

`[attribute*="value"]`

`[attribute~="value"]`

`[attribute^="value"]`

`[attribute$="value"]`

`[attribute|="value"]`

`[attribute="value" i]`

`0-1-0`

वंशज संयोजक: `selector selector`

बाल संयोजक: `selector > selector`

आसन्न सिबलिंग संयोजक: `selector + selector`

सामान्य सिबलिंग संयोजक: `selector ~ selector`