आधुनिक सेलेक्टर: :has, :is, :where, उन्नत :nth-child

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

9 मिनट · 3 प्रश्न

:is() और :where() दोनों सेलेक्टरों को समूहीकृत करते हैं, लेकिन वे एक निर्णायक बिंदु पर अलग होते हैं: विशिष्टता (specificity)। :is(nav, .menu, #main a) अपने सबसे मज़बूत तर्क की विशिष्टता लेता है (यहाँ ID की), भले ही nav वह हो जो मेल खाता है। :where() की विशिष्टता शून्य होती है, उसके तर्क चाहे जो भी हों। व्यावहारिक परिणाम: :where() रीसेट और किसी डिज़ाइन सिस्टम की डिफ़ॉल्ट स्टाइलों के लिए आदर्श उपकरण है, जिसे फिर कोई भी सरल क्लास सेलेक्टर बिना संघर्ष के ओवरराइड कर सकता है।

:where(h1, h2, h3, h4) {
  margin-block: 0;
  line-height: 1.2;
}

:is(article, aside, section) :is(h2, h3) {
  font-family: var(--font-heading);
}

.prose :is(ul, ol) li + li {
  margin-top: 0.5em;
}

:has() अंततः पढ़ने की दिशा को उलट देता है: सेलेक्टर मेज़बान तत्व को लक्षित करता है, न कि उसमें जो कुछ है उसे। .card:has(> img) उस कार्ड का चयन करता है जिसका सीधा चाइल्ड एक इमेज है। स्थिति स्यूडो-क्लासेस के साथ संयुक्त होकर, यह JavaScript के बिना जानकारी को ऊपर की ओर प्रवाहित होने देता है: किसी लेबल को तब स्टाइल करना जब उसका फ़ील्ड अमान्य हो, किसी फ़ॉर्म को तब जब किसी फ़ील्ड में फ़ोकस हो, किसी टेबल पंक्ति को तब जब उसका चेकबॉक्स चेक हो।

.field:has(input:invalid:not(:focus)) label {
  color: #dc2626;
}

.card:has(> img) {
  padding-top: 0;
}

tr:has(input[type="checkbox"]:checked) {
  background: #eef2ff;
}

:nth-child() पर, समेकित करने योग्य दो कौशल। पहला, An+B सूत्रों को पढ़ना: 2n (सम), 2n+1 (विषम), -n+3 (पहले तीन), n+4 (चौथे से अंत तक); "2रे से 5वें तक" की सीमा :nth-child(n+2):nth-child(-n+5) को जोड़कर लिखी जाती है। दूसरा, अधिक हालिया of S सिंटैक्स: :nth-child(2n of .visible) केवल उन चाइल्ड में गिनती करता है जो .visible से मेल खाते हैं, जबकि .visible:nth-child(2n) सभी चाइल्ड को गिनता है और फिर फ़िल्टर करता है - जैसे ही अन्य तत्व बीच में आते हैं, दो बहुत अलग परिणाम।

tr:nth-child(odd) {
  background: #fafafa;
}

li:nth-child(-n + 3) {
  font-weight: 600;
}

li:nth-child(n + 2):nth-child(-n + 5) {
  border-top: 1px solid #e5e7eb;
}

.row:nth-child(2n of .visible) {
  background: #eef2ff;
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. :where(#main, .nav, a) की विशिष्टता क्या है?
   • ID की, यानी (1,0,0)
   • तीनों तर्कों का योग
   • शून्य, तर्क चाहे जो भी हों
   • उस तर्क की जो वास्तव में मेल खाता है
2. .card:has(> img) क्या चयन करता है?
   • वे इमेज जो किसी कार्ड की सीधी चाइल्ड हैं
   • वे कार्ड जिनमें सीधे चाइल्ड के रूप में एक इमेज होती है
   • वे कार्ड जो DOM में किसी इमेज के बाद स्थित हैं
   • वे सभी इमेज जो कार्डों की वंशज हैं
3. एक ऐसी सूची में जहाँ केवल कुछ li तत्व .visible रखते हैं, li:nth-child(2n of .visible) क्या करता है?
   • यह सूची के उन सम li तत्वों को लक्षित करता है जिनके पास .visible क्लास भी है
   • यह हर दूसरे li को लक्षित करता है, केवल li.visible तत्वों को गिनते हुए
   • यह सम li तत्वों को लक्षित करता है और फिर उनमें .visible क्लास जोड़ देता है