CSS3 चयनकर्ता: कक्षा के नाम के साथ पहले प्रकार का?


Answers

मसौदा सीएसएस चयनकर्ता स्तर 4 का प्रस्ताव है of <other-selector> व्याकरण में शामिल है :nth-child selector । यह आपको किसी दिए गए अन्य चयनकर्ता से मेल खाने वाले एन वें बच्चे को चुनने की अनुमति देगा:

:nth-child(1 of p.myclass) 

पिछले ड्राफ्ट्स ने एक नया छद्म-वर्ग का उपयोग किया था :nth-match() , ताकि आप सुविधा के कुछ चर्चाओं में सिंटैक्स देख सकें:

:nth-match(1 of p.myclass)

इसे अब वेबकिट में लागू किया गया है, और इस प्रकार सफारी में उपलब्ध है, लेकिन ऐसा लगता है कि यह एकमात्र ब्राउज़र है जो इसका समर्थन करता है । इसे ब्लिंक (क्रोम) , गेको (फ़ायरफ़ॉक्स) , और एज में इसे लागू करने का अनुरोध लागू करने के लिए दायर टिकट हैं, लेकिन इनमें से किसी पर कोई स्पष्ट प्रगति नहीं है।

Question

क्या CSS3 चयनकर्ता का उपयोग करना संभव है :first-of-type किसी दिए गए वर्ग के नाम के साथ पहले तत्व का चयन करने के लिए पहले :first-of-type का :first-of-type ? मैं अपने परीक्षण में सफल नहीं हुआ हूं इसलिए मुझे लगता है कि यह नहीं है?

कोड ( http://jsfiddle.net/YWY4L/ ):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>




यह एक पुराना धागा है, लेकिन मैं जवाब दे रहा हूं क्योंकि यह अभी भी खोज परिणामों की सूची में उच्च दिखाई देता है। अब जब भविष्य आ गया है, तो आप: nth-child छद्म चयनकर्ता का उपयोग कर सकते हैं।

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

: Nth-child छद्म चयनकर्ता शक्तिशाली है - कोष्ठक सूत्रों के साथ-साथ संख्याओं को स्वीकार करते हैं।

यहां और अधिक: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child




यह CSS3 चयनकर्ता का उपयोग करना संभव नहीं है : किसी दिए गए वर्ग नाम के साथ पहले तत्व का चयन करने के लिए पहले प्रकार का प्रकार

हालांकि, यदि लक्षित तत्व में पिछले तत्व भाई है, तो आप उस तत्व से मेल खाने के लिए निषेध सीएसएस छद्म-वर्ग और आसन्न भाई चयनकर्ताओं को जोड़ सकते हैं जो तुरंत उसी वर्ग नाम के साथ पिछले तत्व नहीं है:

:not(.myclass1) + .myclass1

पूर्ण कार्य कोड उदाहरण:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>




Related