30 सीएसएस चयनकर्ताओं(CSS Selectors) को याद रखना चाहिए

तो आप आधार id, class और descendant को सीखा है - चयनकर्ताओं  और फिर इसे एक दिन कहा जाता है? यदि हां, तो आप लचीलेपन के एक विशाल स्तर पर खो चुके हैं। हालांकि इस लेख में उल्लिखित कई चयनकर्ता(सिलेक्टर) CSS3 के स्पेक(स्पेसिफिकेशन) का हिस्सा हैं, और इसके परिणामस्वरूप, केवल आधुनिक ब्राउज़रों में उपलब्ध हैं, लेकिन आप इन्हें याद रखने के लिए स्वयं के पास लेते हैं।

1. *

1

* {

2

 margin: 0;

3

 padding: 0;

4

}

शुरुआती लोगों के लिए, हम आगे बढ़ने वाले लोगों को दस्तक दे, इससे पहले कि हम और अधिक उन्नत चयनकर्ता(सिलेक्टर) पर चले जाएं।

स्टार चिन्ह पृष्ठ पर प्रत्येक एक तत्व को लक्षित करेगा। कई डेवलपर्स इस चाल का उपयोग margins और padding को शून्य करने के लिए करेंगे। हालांकि यह निश्चित रूप से त्वरित परीक्षणों के लिए ठीक है, लेकिन मैं आपको सलाह देता हूं कि इसका उपयोग कभी उत्पादन कोड में न करें। यह ब्राउज़र पर बहुत अधिक वजन जोड़ता है, और अनावश्यक है।

* का चयन बाल चयनकर्ताओं के साथ भी किया जा सकता है।

1

#container * {

2

 border: 1px solid black;

3

}

यह प्रत्येक एकल तत्व को लक्षित करेगा जो कि #container div का बच्चा है। दोबारा, इस तकनीक का उपयोग न करने की कोशिश करो, अगर कभी भी।

डेमो देखें

अनुकूलता

• आइई6+ (IE6 +)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

2. #X

1

#container {

2

   width: 960px;

3

   margin: auto;

4

}

एक चयनकर्ता को हैश प्रतीक प्रीफिक्सिंग हमें id द्वारा लक्षित करने की अनुमति देता है। id चयनकर्ता(सिलेक्टर) का उपयोग करते समय यह आसानी से सबसे आम उपयोग होता है, हालांकि सावधान रहें।

अपने आप से पूछें: क्या मुझे लक्ष्य करने के लिए इस तत्व के लिए id को लागू करने की आवश्यकता है?

id चयनकर्ता(सिलेक्टर) कठोर हैं और पुन: उपयोग करने की अनुमति नहीं देते हैं। यदि संभव हो, तो पहले एक टैग नाम, एक नए एचटीएमएल5(HTML5) तत्वों या एक छद्म-वर्ग(सूडो-क्लैस) का उपयोग करने का प्रयास करें।

डेमो देखें

अनुकूलता

• आइई6+ (IE6 +)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

3. .X

1

.error {

2

  color: red;

3

}

यह एक class चयनकर्ता(सिलेक्टर) है। id और class के बीच का अंतर यह है, कि बाद के साथ, आप कई तत्वों को लक्षित कर सकते हैं। Class का उपयोग करें जब आप अपने स्टाइल को तत्वों के समूह पर लागू करना चाहते हैं। वैकल्पिक रूप से, एक needle-in-a-haystack, खोजने के लिए id s का उपयोग करें, और केवल उस विशिष्ट तत्व की शैली का उपयोग करें।

डेमो देखें

अनुकूलता

• आइई6+ (IE6 +)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

4. X Y

1

li a {

2

  text-decoration: none;

3

}

अगला सबसे अधिक टिप्पणी चयनकर्ता descendant चयनकर्ता है। जब आपको अपने चयनकर्ताओं के साथ अधिक विशिष्ट होना चाहिए, तो आप इन का उपयोग करते हैं। उदाहरण के लिए, क्या होगा यदि सभी एंकर टैग को लक्षित करने की बजाय, आपको केवल उन लंगरों(एंकर) को लक्षित(टार्गट) करने की आवश्यकता है जो एक अनोर्ड सूची में हैं? यह विशेष रूप से जब आप एक वंश(डिसेन्डन्ट) चयनकर्ता(सिलेक्टर) का उपयोग करेंगे।

प्रो टिप - यदि आपका चयनकर्ता(सिलेक्टर) X Y Z A B.error जैसा दिखता है, तो आप इसे गलत कर रहे हैं। हमेशा अपने आप से पूछें कि क्या उस सभी वजन को लागू करने के लिए बिल्कुल आवश्यक है।

डेमो देखें

अनुकूलता

• आइई6+ (IE6 +)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

5. X

1

a { color: red; }

2

ul { margin-left: 0; }

क्या होगा अगर आप किसी id या classname के बजाय उनके type के अनुसार एक पृष्ठ पर सभी तत्वों को लक्षित करना चाहते हैं? इसे सरल रखें, और एक प्रकार चयनकर्ता का उपयोग करें। अगर आपको सभी अपरिवर्तित सूचियों को लक्षित करने की आवश्यकता है, तो ul {} का उपयोग करें।

डेमो देखें

अनुकूलता

• आइई6+ (IE6 +)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

6. X:visited and X:link

1

a:link { color: red; }

2

a:visted { color: purple; }

हम उन सभी एंकर टैगों को लक्षित करने के लिए :link छद्म-वर्ग(सूडो-क्लैस) का उपयोग करते हैं, जिन्हें अभी तक क्लिक नहीं किया जाता है।

वैकल्पिक रूप से, हमारे पास भी :visited छद्म-वर्ग(सूडो-क्लैस) का दौरा है, जो कि आप उम्मीद करते थे, हमें पृष्ठ पर केवल एंकर टैग पर विशिष्ट स्टाइल लागू करने की अनुमति देता है, जिस पर क्लिक किया गया है, या दौरा किया है।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

7. X + Y

1

ul + p {

2

   color: red;

3

}

इसे एक आसन्न(अजैसन्ट) चयनकर्ता(सिलेक्टर) के रूप में संदर्भित किया गया है। यह केवल तत्व का चयन करेगा जो तत्काल पूर्व तत्व से पहले हो। इस मामले में, प्रत्येक ul के बाद केवल पहला अनुच्छेद लाल रंग का होगा।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

8. X > Y

1

div#container > ul {

2

  border: 1px solid black;

3

}

मानक X Y और X > Y के बीच का अंतर यह है कि बाद में केवल सीधे बच्चों को ही चुन लिया जाएगा। उदाहरण के लिए, निम्न मार्कअप पर विचार करें।

1

   <div id="container">

2

      <ul>

3

         <li> List Item

4

           <ul>

5

              <li> Child </li>

6

           </ul>

7

         </li>

8

         <li> List Item </li>

9

         <li> List Item </li>

10

         <li> List Item </li>

11

      </ul>

12

   </div>

#container > ul के एक चयनकर्ता केवल uls को लक्षित करेगा जो container की एक id के साथ div के प्रत्यक्ष बच्चे हैं। यह लक्ष्य नहीं होगा, उदाहरण के लिए, ul जो पहली li का बच्चा है।

इस कारण से, बच्चे संयोजक का उपयोग करने में प्रदर्शन लाभ हैं। वास्तव में, यह विशेष रूप से अनुशंसित है जब जावास्क्रिप्ट-आधारित सीएसएस(CSS) चयनकर्ता(सिलेक्टर) इंजन के साथ काम करना।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

9. X ~ Y

1

ul ~ p {

2

   color: red;

3

}

यह भाई संयोगक X + Y के समान है, हालांकि, यह कम सख्त है। जबकि एक आसन्न चयनकर्ता (ul + p) केवल पहले तत्व का चयन करेगा जो कि पूर्व चयनकर्ता(सिलेक्टर) द्वारा तत्काल पहले किया गया है, यह एक अधिक सामान्यीकृत है। यह हमारे ऊपर दिए गए उदाहरण के संदर्भ में, किसी भी p तत्वों का चयन करेगा, जब तक कि वे ul का पालन करते हैं।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

10. X[title]

1

a[title] {

2

   color: green;

3

}

एक विशेषता चयनकर्ता(ऐट्रब्यूट सिलेक्टर) के रूप में संदर्भित, ऊपर हमारे उदाहरण में, यह केवल एंकर टैग का चयन करेगा जिनके पास title विशेषता(ऐट्रब्यूट) है। एंकर टैग जो इस विशिष्ट स्टाइल को प्राप्त नहीं करेंगे। लेकिन, अगर आपको अधिक विशिष्ट होना चाहिए तो क्या होगा? खैर ...

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

11. X[href="foo"]

1

a[href="https://net.tutsplus.com"] {

2

  color: #1f6053; /* nettuts green */

3

}

ऊपर दिए स्निपेट में सभी एंकर टैग होंगे जो कि लिंक हैं https://net.tutsplus.com; वे हमारे ब्रांडेड हरे रंग का रंग प्राप्त करेंगे। अन्य सभी एंकर टैग अप्रभावित रहेंगे।

ध्यान दें कि हम उद्धरण में मूल्य लपेटते हैं। जावास्क्रिप्ट सीएसएस(CSS) चयनकर्ता(सिलेक्टर) इंजन का उपयोग करते समय ऐसा करने के लिए भी याद रखें। जब भी संभव हो, हमेशा अनधिकृत तरीकों से CSS3 चयनकर्ताओं(सिलेक्टर) का उपयोग करें।

यह अच्छी तरह से काम करता है, हालांकि, यह थोड़ा कठोर है। क्या होगा यदि लिंक वास्तव में Nettuts+, पर प्रत्यक्ष रूप से निर्देशित है, लेकिन, शायद, पथ पूरे यूआरएल के बजाय nettuts.com है? उन मामलों में हम कुछ नियमित अभिव्यक्ति वाक्यविन्यास का उपयोग कर सकते हैं।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

12. X[href*="nettuts"]

1

a[href*="tuts"] {

2

  color: #1f6053; /* nettuts green */

3

}

हम वहाँ चलें; हमे इसी की जरूरत है। स्टार बताता है कि कार्यवाही मूल्य विशेषता के मूल्य में कहीं दिखाई देना चाहिए। इस तरह, यह nettuts.com, net.tutsplus.com, और यहां तक कि tutsplus.com भी शामिल है।

ध्यान रखें कि यह एक व्यापक वक्तव्य है। क्या होगा अगर एंकर टैग कुछ गैर-एन्वाटो साइट से जुड़े हुए हैं जो यूआरएल में स्ट्रिंग टट्स के साथ हैं? जब आपको अधिक विशिष्ट होना चाहिए, तो क्रमशः एक स्ट्रिंग की शुरुआत और अंत संदर्भित करने के लिए, ^ और $ का उपयोग करें।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

13. X[href^="http"]

1

a[href^="http"] {

2

   background: url(path/to/external/icon.png) no-repeat;

3

   padding-left: 10px;

4

}

कभी पता नहीं कैसे कुछ वेबसाइटें लिंक के बगल में थोड़ा चिह्न प्रदर्शित करने में सक्षम हैं जो बाहरी हैं? मुझे यकीन है कि आपने ये पहले देखा है; वे अच्छी अनुस्मारक हैं कि लिंक आपको पूरी तरह से अलग वेबसाइट पर भेज देगा।

यह कैरेट प्रतीक के साथ एक सिन्च है। यह स्ट्रिंग की शुरुआत को निर्दिष्ट करने के लिए सामान्य रूप से सामान्य अभिव्यक्ति में उपयोग किया जाता है। अगर हम सभी एन्कर टैग्स को लक्षित करना चाहते हैं जिनमें href हैं जो http के साथ शुरू होता है, तो हम ऊपर दिखाए गए स्निपेट के समान एक चयनकर्ता का उपयोग कर सकते हैं।

ध्यान दें कि हम https:// के लिए खोज नहीं कर रहे हैं; यह अनावश्यक है, और https:// से शुरु होने वाले यूआरएल के लिए खाता नहीं है।

अब, क्या होगा अगर हम चाहते हैं कि सभी एंकर वाले चीजों को जोड़ने, जो एक फोटो से जुड़ें? उन मामलों में, चलो स्ट्रिंग के अंत की खोज करें।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

14. X[href$=".jpg"]

1

a[href$=".jpg"] {

2

   color: red;

3

}

फिर, हम एक स्ट्रिंग के अंत का संदर्भ देने के लिए, एक नियमित अभिव्यक्ति प्रतीक, $ , का उपयोग करते हैं। इस मामले में, हम सभी एंकरों के लिए खोज रहे हैं जो एक छवि से लिंक होते हैं - या कम से कम एक यूआरएल(url) जो .jpg के साथ समाप्त होता है। ध्यान रखें कि यह निश्चित रूप से जी gifs और pngs के लिए काम नहीं करेगा।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

15. X[data-*="foo"]

1

a[data-filetype="image"] {

2

   color: red;

3

}

आठ नंबर पर वापस देखें; हम सभी विभिन्न प्रकार के प्रकारों के लिए कैसे क्षतिपूर्ति करते हैं: png, jpeg, jpg, gif? ठीक है, हम कई चयनकर्ता(सिलेक्टर) बना सकते हैं, जैसे:

1

a[href$=".jpg"],

2

a[href$=".jpeg"],

3

a[href$=".png"],

4

a[href$=".gif"] {

5

   color: red;

6

}

लेकिन, यह बट में एक दर्द है, और अक्षम है। एक अन्य संभावित समाधान कस्टम विशेषताओं(ऐट्रब्यूट) का उपयोग करना है। क्या होगा यदि हमने प्रत्येक एंकर में अपना data-filetype विशेषता जोड़ दी जो एक छवि से लिंक होती है?

1

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

फिर, उस हुक के साथ, हम केवल उन एंकर को लक्षित करने के लिए एक मानक विशेषता चयनकर्ता का उपयोग कर सकते हैं।

1

a[data-filetype="image"] {

2

   color: red;

3

}

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

16. X[foo~="bar"]

1

 a[data-info~="external"] {

2

   color: red;

3

}

4

5

a[data-info~="image"] {

6

   border: 1px solid black;

7

}

यहाँ एक खास है जो आपके दोस्तों को प्रभावित करेगा। बहुत सारे लोग इस चाल के बारे में नहीं जानते। टिल्डा (~) प्रतीक हमें एक विशेषता को लक्षित करने की अनुमति देता है जिसमें मूल्यों की दूरी से अलग सूची है।

ऊपर से पंद्रह संख्या से हमारे कस्टम विशेषता(ऐट्रब्यूट) के साथ जा रहे हैं, हम data-info विशेषता(ऐट्रब्यूट) बना सकते हैं, जो हमें नोट करने के लिए कुछ भी एक स्थान से अलग सूची प्राप्त कर सकता है। इस मामले में, हम बाहरी लिंक्स और छवियों के लिंक नोट करेंगे - सिर्फ उदाहरण के लिए।

1

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

उस मार्कअप के साथ, अब हम ऐसे किसी भी टैग को लक्षित कर सकते हैं, जिसमें उन दोनों में से कोई भी गुण हो, जो कि ~ विशेषता(ऐट्रब्यूट) चयनकर्ता(सिलेक्टर) चाल का उपयोग कर।

1

/* Target data-info attr that contains the value "external" */

2

a[data-info~="external"] {

3

   color: red;

4

}

5

6

/* And which contain the value "image" */

7

a[data-info~="image"] {

8

  border: 1px solid black;

9

}

सुंदर निफ्टी, है ना?

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

17. X:checked

1

input[type=radio]:checked {

2

   border: 1px solid black;

3

}

यह छद्म वर्ग(सूडोक्लैस) केवल एक उपयोगकर्ता इंटरफ़ेस तत्व को लक्षित करेगा, जिसे चेक किया गया है - जैसे कि एक रेडियो बटन, या चेकबॉक्स। यह इतना सरल है।

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

18. X:after

छद्म वर्ग(सूडो क्लैस) के before और after में किक बट। हर दिन, ऐसा लगता है, लोग प्रभावी ढंग से उनका इस्तेमाल करने के नए और रचनात्मक तरीके खोज रहे हैं। वे केवल चयनित तत्व के आसपास सामग्री उत्पन्न करते हैं।

कई लोगों को पहली बार इन कक्षाओं में पेश किया गया था, जब उन्हें स्पष्ट-फिक्स हैक का सामना करना पड़ा था।

1

.clearfix:after {

2

    content: "";

3

    display: block;

4

    clear: both;

5

    visibility: hidden;

6

    font-size: 0;

7

    height: 0;

8

    }

9

10

.clearfix { 

11

   *display: inline-block; 

12

   _height: 1%;

13

}

यह हैक का उपयोग करता है :after छद्म वर्ग(सूडो क्लैस) के बाद तत्व के बाद एक स्थान जोड़ने के लिए, और उसके बाद उसे साफ़ करें। यह आपके टूल बैग में एक उत्कृष्ट चाल है, खासकर उन मामलों में जब overflow: hidden; विधि संभव नहीं है।

इसका एक और रचनात्मक उपयोग के लिए, छाया बनाने के बारे में मेरी त्वरित युक्ति देखें।

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

अनुकूलता

• आइई8+ (IE8+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

19. X:hover

1

div:hover {

2

  background: #e3e3e3;

3

}

ओह अब छोड़िए भी। आप ये जानते हैं। इसके लिए आधिकारिक शब्द user action pseudo class है। यह अस्पष्ट लगता है, लेकिन यह वास्तव में नहीं है। जब एक उपयोगकर्ता एक तत्व पर जाए तो विशिष्ट स्टाइल लागू करना चाहते हैं? यह काम पूरा हो जाएगा!

ध्यान रखें कि इंटरनेट एक्सप्लोरर का पुराना संस्करण इसका जवाब नहीं देता जब :hover छद्म वर्ग(सूडो क्लैस) को किसी एंकर टैग के अलावा किसी अन्य पर लागू किया जाता है।

उदाहरण के लिए, जब आप ऊपर बैठते हैं, तब टैग के किसी border-bottom को टैग करने के लिए आप अक्सर इस चयनकर्ता का प्रयोग करेंगे।

1

a:hover {

2

 border-bottom: 1px solid black;

3

}

प्रो-टिप - border-bottom: 1px solid black; , text-decoration: underline; से बेहतर लगता है।

अनुकूलता

• आईई 6 + (आईई 6 में, :hover को ऐंकर तत्व पर लागू किया जाना चाहिए)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

20. X:not(selector)

1

div:not(#container) {

2

   color: blue;

3

}

negation छद्म वर्ग(सूडो क्लैस) विशेष रूप से उपयोगी है। मान लीजिए कि मैं सभी divs का चयन करना चाहता हूं, सिवाय इसके कि container की एक id है। ऊपर दिए स्निपेट उस कार्य को पूरी तरह से संभाल लेंगे।

या, यदि मैं पैराग्राफ टैग को छोड़कर हर एक तत्व (रेकमेन्ड नहीं) का चयन करना चाहता हूं, तो हम ऐसा कर सकते हैं:

1

*:not(p) {

2

  color: green;

3

}

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

21. X::pseudoElement

1

p::first-line {

2

   font-weight: bold;

3

   font-size: 1.2em;

4

}

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

एक छद्म तत्व दो बृहदान्त्रों से बना है: ::

अनुच्छेद के पहले अक्षर को लक्षित करें

1

p::first-letter {

2

   float: left;

3

   font-size: 2em;

4

   font-weight: bold;

5

   font-family: cursive;

6

   padding-right: 2px;

7

}

यह स्निपेट एक अमूर्त है, जो पृष्ठ पर सभी पैराग्राफ़ पाएंगे, और उसके बाद उस तत्व का पहला अक्षर उप-लक्ष्य होगा।

इसका इस्तेमाल प्रायः समाचार पत्र बनाने के लिए किया जाता है - एक लेख के पहले अक्षर के लिए स्टाइल की तरह।

अनुच्छेद की पहली रेखा को लक्षित करें

1

p::first-line {

2

   font-weight: bold;

3

   font-size: 1.2em;

4

}

इसी प्रकार, ::first-line, अपेक्षित रूप से, केवल तत्व की पहली पंक्ति को शैली देगा।

"मौजूदा स्टाइल शीट्स के साथ संगतता के लिए, उपयोगकर्ता एजेंटों को भी सीएसएस(CSS) स्तर 1 और 2 में पेश किए गए छद्म(सूडो) तत्वों के लिए पिछले एक-कोलन संकेतन को स्वीकार करना होगा (अर्थात्: first-line,: first-letter, :before और :after)। इस विशिष्टता(ऐट्रब्यूट) में पेश किए गए नए छद्म तत्वों के लिए इस संगतता की अनुमति नहीं है। " - स्रोत

डेमो देखें

अनुकूलता

• आइई6+ (IE6+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

22. X:nth-child(n)

1

li:nth-child(3) {

2

   color: red;

3

}

दिन याद रखें जब हमारे पास स्टैक में विशिष्ट तत्वों को लक्षित करने का कोई तरीका नहीं था? Nth-child छद्म वर्ग(सूडो क्लैस) हल करता है!

कृपया ध्यान दें कि nth-child पैरामीटर के रूप में एक पूर्णांक स्वीकार करता है, हालांकि, यह शून्य-आधारित नहीं है। यदि आप दूसरी सूची आइटम को लक्षित करना चाहते हैं, तो li:nth-child(2) का उपयोग करें।

हम चिल्ड्रन का एक वैरिएबल समूह चुनने के लिए इसका उपयोग भी कर सकते हैं। उदाहरण के लिए, हम li:nth-child(4n) प्रत्येक चौथे सूची आइटम का चयन कर सकते हैं।

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स 3.5+ (Firefox 3.5+)
• क्रोम (Chrome)
• सफारी (Safari)

23. X:nth-last-child(n)

1

li:nth-last-child(2) {

2

   color: red;

3

}

क्या होगा अगर आपके पास ul में मदों की एक बड़ी सूची थी, और केवल अंतिम आइटम तक तीसरे नंबर का उपयोग करने की आवश्यकता है? li:nth-child(397) होने के बजाय, आप इसके बजाय nth-last-child छद्म वर्ग(सूडो क्लैस) का उपयोग कर सकते हैं।

यह तकनीक ऊपर से सोलह संख्या से लगभग समान रूप से काम करती है, हालांकि, अंतर यह है कि यह संग्रह के अंत में शुरू होता है, और इसके तरीके को वापस काम करता है।

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

24. X:nth-of-type(n)

1

ul:nth-of-type(3) {

2

   border: 1px solid black;

3

}

ऐसे समय होंगे जब एक child को चुनने के बजाय, आपको तत्व के type के अनुसार चयन करना होगा।

मार्कअप की कल्पना करें जिसमें पांच अनारक्षित सूची शामिल है। यदि आप केवल तीसरे ul के लिए शैली चाहते थे, और आप में हुक करने के लिए एक अनूठा id नहीं था, तो आप nth-of-type(n) छद्म वर्ग का उपयोग कर सकते हैं। ऊपर दिए स्निपेट में, केवल तीसरे ul के आस-पास एक सीमा होगी।

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)

25. X:nth-last-of-type(n)

1

ul:nth-last-of-type(3) {

2

   border: 1px solid black;

3

}

और हां, लगातार बने रहने के लिए, हम चयनकर्ताओं(सिलेक्टर) की सूची के अंत में शुरू करने के लिए nth-last-of-type का उपयोग कर सकते हैं, और वांछित तत्व को लक्षित करने के लिए हमारे रास्ते वापस काम कर सकते हैं।

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स 3.5+ (Firefox 3.5+)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

26. X:first-child

1

ul li:first-child {

2

   border-top: none;

3

}

यह संरचनात्मक छद्म वर्ग(सूडो क्लैस) हमें तत्व के अभिभावक के केवल पहले चाइल्ड को लक्षित करने की अनुमति देता है। आप इसका उपयोग अक्सर पहली और अंतिम सूची आइटम से सीमाओं को हटाने के लिए करेंगे।

उदाहरण के लिए, मान लें कि आपके पास पंक्तियों की एक सूची है, और प्रत्येक के पास border-top और एक border-bottom है। ठीक है, उस व्यवस्था के साथ, उस सेट का पहला और अंतिम आइटम थोड़ा अजीब दिखेगा।

कई डिजाइनर इस की भरपाई करने के लिए first और last की कक्षाएं लागू करते हैं। इसके बजाय, आप इन छद्म वर्गों(सूडो क्लैस) का उपयोग कर सकते हैं।

डेमो देखें

अनुकूलता

• आइई7+ (IE7+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

27. X:last-child

1

ul > li:last-child {

2

   color: green;

3

}

first-child के विपरीत, last-child तत्व के माता-पिता के अंतिम आइटम को लक्षित करेगा।

उदाहरण

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

मार्कप

1

  <ul>

2

     <li> List Item </li>

3

     <li> List Item </li>

4

     <li> List Item </li>

5

  </ul>

यहाँ कुछ खास नहीं; सिर्फ एक साधारण सूची।

सीएसएस(CSS)

1

ul {

2

 width: 200px;

3

 background: #292929;

4

 color: white;

5

 list-style: none;

6

 padding-left: 0;

7

}

8

9

li {

10

 padding: 10px;

11

 border-bottom: 1px solid black;

12

 border-top: 1px solid #3c3c3c;

13

}

यह स्टाइल एक पृष्ठभूमि सेट करेगा, ul पर ब्राउज़र-डिफ़ॉल्ट पैडिंग को निकाल देगा, और गहराई प्रदान करने के लिए प्रत्येक li में सीमाएं लागू करेंगी।

अपनी सूचियों में गहराई जोड़ने के लिए, प्रत्येक li के लिए border-bottom लागू करें जो कि li के पृष्ठभूमि रंग से छाया या दो गहरा है। इसके बाद, एक border-top पर लागू करें जो कि कुछ रंगों का हल्का है।

एकमात्र समस्या, जैसा कि ऊपर की छवि में दिखाया गया है, यह है कि सीमा को अनारक्षित सूची के ऊपर और नीचे पर लागू किया जाएगा - जो अजीब लग रहा है। चलो इसका इस्तेमाल करते हैं :first-childऔर :last-child छद्म क्लैस इसे ठीक करने के लिए।

1

li:first-child {

2

    border-top: none;

3

}

4

5

li:last-child {

6

   border-bottom: none;

7

}

वहाँ हम चले; कि यह ठीक करता है!

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

हां - IE8 समर्थित :first-child, लेकिन नहीं :last-child । जाओ पता लगाओ।

28. X:only-child

1

div p:only-child {

2

   color: red;

3

}

सच्चाई से, आप शायद only-child छद्म वर्ग का प्रयोग भी नहीं कर पाएंगे। बहरहाल, यह उपलब्ध है, आपको इसकी आवश्यकता है।

यह आपको ऐसे तत्वों को लक्षित करने की अनुमति देता है जो उसके माता-पिता के एकमात्र चाइल्ड हैं। उदाहरण के लिए, ऊपर दिए स्निपेट को संदर्भित करना, केवल पैराग्राफ है कि div का एकमात्र बच्चा रंगीन होगा, लाल होगा।

चलो निम्नलिखित मार्कअप माने।

1

<div><p> My paragraph here. </p></div>

2

3

<div>

4

   <p> Two paragraphs total. </p>

5

   <p> Two paragraphs total. </p>

6

</div>

इस मामले में, दूसरे div के पैराग्राफ को लक्षित नहीं किया जाएगा; केवल पहले div । जैसे ही आप एक से अधिक बच्चे को एक तत्व के लिए लागू करते हैं, only-child छद्म वर्ग(सूडो क्लैस) को प्रभाव में लेना बंद रहता है।

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स (Firefox)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

29. X:only-of-type

1

li:only-of-type {

2

   font-weight: bold;

3

}

इस संरचनात्मक छद्म वर्ग(सूडो क्लैस) का उपयोग कुछ चालाक तरीके से किया जा सकता है। यह ऐसे तत्वों को लक्षित करेगा, जिनके माता-पिता कंटेनर में कोई भाई बहन नहीं है। उदाहरण के तौर पर, हम सभी uls को लक्षित करते हैं, जिसमें केवल एक सूची वस्तु होती है।

सबसे पहले, अपने आप से पूछें कि आप इस कार्य को कैसे पूरा करेंगे? आप ul li कर सकते हैं, लेकिन, यह सभी सूची आइटमों को लक्षित करेगा। एकमात्र समाधान only-of-type का उपयोग करना है।

1

ul > li:only-of-type {

2

   font-weight: bold;

3

}

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स3.5+ (Firefox3.5+)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

30. X:first-of-type

इस first-of-type छद्म वर्ग(सूडो क्लैस) आपको इसके प्रकार के प्रथम भाई को चुनने की अनुमति देता है।

एक परीक्षा

इसे बेहतर समझने के लिए, हमारे पास एक परीक्षण है। अपने कोड एडिटर में निम्नलिखित मार्क-अप की प्रतिलिपि बनाएँ:

1

<div>

2

   <p> My paragraph here. </p>

3

   <ul>

4

      <li> List Item 1 </li>

5

      <li> List Item 2 </li>

6

   </ul>

7

8

   <ul>

9

      <li> List Item 3 </li>

10

      <li> List Item 4 </li>

11

   </ul>   

12

</div>

अब, आगे पढ़े बिना, यह जानने की कोशिश करें कि केवल "सूची आइटम 2" कैसे लक्षित करें। जब आप इसे सोचा (या छोड़ दिया) है, पढ़ते रहिये।।

समाधान 1

इस परीक्षण को हल करने के कई तरीके हैं। हम उनमें से कुछ की समीक्षा करेंगे। first-of-type का उपयोग करके शुरू करते हैं।

1

ul:first-of-type > li:nth-child(2) {

2

   font-weight: bold;

3

}

यह स्निपेट अनिवार्य रूप से कहते हैं, "पेज पर पहली अनोर्ड सूची को ढूंढें, फिर केवल तात्कालिक बच्चों को खोजें, जो सूची आइटम हैं। इसके बाद, उस सेट में केवल दूसरी सूची वस्तु के नीचे फ़िल्टर करें।

समाधान 2

एक अन्य विकल्प आसन्न(अजैसन्ट) चयनकर्ता(सिलेक्टर) का उपयोग करना है।

1

p + ul li:last-child {

2

   font-weight: bold;

3

}

इस परिदृश्य में, हम उस ul को पाते हैं जो तत्काल p टैग से निकलते हैं, और तब तत्व का अंतिम अंतिम चाइल्ड पाते हैं।

समाधान 3

हम इन चयनकर्ताओं(सिलेक्टर) के साथ चाहते हैं कि हम अप्रिय या चंचल हो सकते हैं।

1

ul:first-of-type li:nth-last-child(1) {

2

   font-weight: bold;   

3

}

इस बार, हम पेज पर पहले ul को पकड़ लेते हैं, और फिर सबसे पहले सूची आइटम ढूंढते हैं, लेकिन नीचे से शुरू करते हैं! :)

डेमो देखें

अनुकूलता

• आइई9+ (IE9+)
• फ़ायरफ़ॉक्स3.5+ (Firefox3.5+)
• क्रोम (Chrome)
• सफारी (Safari)
• ओपेरा (Opera)

निष्कर्ष

यदि आप पुराने ब्राउज़रों जैसे इंटरनेट एक्सप्लोरर 6 के लिए क्षतिपूर्ति कर रहे हैं, तो आपको इन नए चयनकर्ता(सिलेक्टर) का उपयोग करते समय सावधान रहना होगा। लेकिन, कृपया इन्हें सीखने से रोकना न दें। आप अपने आप को बहुत नुक़सान करेंगे। ब्राउज़र-संगतता सूची के लिए सुनिश्चित  यहां देखें। वैकल्पिक रूप से, आप इन चयनकर्ताओं के पुराने ब्राउज़र पर समर्थन देने के लिए डीन एडवर्ड की शानदार IE9.js स्क्रिप्ट का उपयोग कर सकते हैं।

दूसरे, जावास्क्रिप्ट पुस्तकालयों के साथ काम करते समय, लोकप्रिय jQuery की तरह, जब भी संभव हो तो लायब्रेरी के कस्टम विधियों / चयनकर्ता(सिलेक्टर) पर इन मूल CSS3 चयनकर्ताओं का उपयोग करने की कोशिश करें। यह आपके कोड को तेज़ी से बढ़ाएगा, क्योंकि चयनकर्ता इंजन अपने स्वयं के बजाय, ब्राउज़र के देशी विश्लेषण का उपयोग कर सकता है।

पढ़ने के लिए धन्यवाद, और मुझे आशा है कि आपने एक या दो खरीद लेंगे!