CSS3 चयनकर्ता: प्रथम श्रेणी के नाम के साथ?

Question

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

कोड ( 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>

Answer 1

नहीं, यह सिर्फ एक चयनकर्ता का उपयोग करना संभव नहीं है। :first-of-typeछद्म वर्ग अपनी के पहले तत्व का चयन करता है प्रकार ( div, p, आदि)। उस छद्म वर्ग के साथ एक वर्ग चयनकर्ता (या एक प्रकार का चयनकर्ता) का उपयोग करने का अर्थ है किसी तत्व का चयन करना यदि उसमें दी गई कक्षा (या दिए गए प्रकार का) है और अपने भाई-बहनों के बीच यह पहला प्रकार है।

दुर्भाग्य से, CSS एक :first-of-classचयनकर्ता प्रदान नहीं करता है जो केवल एक वर्ग की पहली घटना चुनता है। वर्कअराउंड के रूप में, आप कुछ इस तरह का उपयोग कर सकते हैं:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

वर्कअराउंड के लिए स्पष्टीकरण और चित्र यहां और यहां दिए गए हैं ।

Comments

No @justNik यह कई तत्वों के लिए काम करता है। .myclass1चयनकर्ता के प्रत्येक तत्व का चयन करेंगे .myclass1। चयनकर्ता .myclass1 ~ .myclass1सामान्य सिबलिंग कॉम्बीनेटर का उपयोग उस वर्ग के साथ प्रत्येक तत्व का चयन करने के लिए करता .myclass1है जो निम्न वर्ग के साथ एक तत्व का निम्न सिबलिंग है .myclass1। यह यहाँ आश्चर्यजनक विस्तार से समझाया गया है ।

— वेबवेंडर

बहुत बढ़िया! यह उस स्क्रॉल-जासूस कार्यान्वयन के लिए अच्छी तरह से काम करता है जिसमें प्रतिच्छेदन प्रेक्षक का उपयोग किया जाता है, जहां कुछ खंड दोनों पृष्ठ पर दिखाई दे सकते हैं, लेकिन हम केवल पहले सक्रिय वाले को ही आकर्षित करना चाहते हैं।

— जावरा

Answer 2

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

:nth-child(1 of p.myclass) 

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

:nth-match(1 of p.myclass)

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

Comments

केवल 10 साल, और मैं इसका उपयोग कर सकता हूं। यद्यपि इस परियोजना का उपयोग मैं कल करूंगा।

— लाजोस मेस्सरोस

: nth-match () nth-child () के लिए नई सुविधाओं के पक्ष में गिरा दिया गया, जो अभी तक अच्छी तरह से समर्थित नहीं हैं: caniuse.com/#feat=css-nth-child-of

— nabrown

@ nabrown78 सिर के लिए धन्यवाद, वर्तमान होने का जवाब अपडेट किया।

— ब्रायन कैंपबेल

Answer 3

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

हालाँकि, यदि लक्षित तत्व में एक पिछला तत्व सिबलिंग है, तो आप नेगेटिव CSS pseudo-class और समीपवर्ती सिबलिंग सिलेक्टर्स को एक ऐसे तत्व से मिला सकते हैं, जिसमें तुरंत समान क्लास नाम के साथ एक पिछला तत्व न हो:

: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>

Answer 4

मुझे आपके संदर्भ के लिए एक समाधान मिला। कुछ समूह divs में से दो एक ही वर्ग div के समूह का चयन करें

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

BTW, मुझे नहीं पता कि क्यों :last-of-typeकाम करता है, लेकिन :first-of-typeकाम नहीं करता है।

Jsfiddle पर मेरे प्रयोग ... https://jsfiddle.net/aspanoz/m1sg4496/

Comments

यह आवश्यकतानुसार काम नहीं करता है, जैसा कि पहले से ही फिडल से देखा जा सकता है। केवल एक चीज है यह करता है, है नहीं पिछले div चयन अगर यह वर्ग नहीं है।

— मार्टन कोएटिएर

Answer 5

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

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

Comments

हाँ, मुझे नहीं लगता कि यह काम करता है, कम से कम क्रोम में नहीं ... jsfiddle.net/YWY4L/91

— एडम यंगर्स

"अब जब भविष्य आ गया है" तो आपका क्या मतलब है? यह केवल लेखन के समय सफारी में काम करता है।

— एलेजांद्रो गार्सिया इग्लेसियस

Answer 6

एक गिरावट समाधान के रूप में, आप अपनी कक्षाओं को इस तरह से मूल तत्व में लपेट सकते हैं:

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

Answer 7

यकीन नहीं है कि यह कैसे समझा जाए लेकिन मैं आज कुछ इसी तरह भाग गया। ठीक काम .user:first-of-type{}करते समय सेट नहीं किया जा रहा .user:last-of-type{}है। बिना किसी वर्ग या स्टाइल के मैंने उन्हें एक div के अंदर लपेटने के बाद यह तय किया था:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

Answer 8

आप यह कर सकते हैं कि कक्षा के प्रत्येक तत्व का चयन करें, जो उसी वर्ग का सहोदर है और इसे उलट रहा है, जो पृष्ठ के प्रत्येक तत्व का चयन करेगा, इसलिए आपको फिर से कक्षा द्वारा चयन करना होगा।

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

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

Answer 9

बस :firstमेरे लिए काम करता है, यह अभी तक क्यों उल्लेख नहीं किया गया है?

Comments

:firstमुद्रण से संबंधित एक छद्म वर्ग है।

— user247702