मैं कैसे भी और विषम तत्वों को स्टाइल कर सकता हूं?

281

क्या सीएसएस छद्म वर्गों का उपयोग करना संभव है, सूची आइटम के समान और विषम उदाहरणों का चयन करने के लिए?

मैं निम्नलिखित रंगों की सूची तैयार करने की अपेक्षा करूंगा, लेकिन इसके बजाय मुझे नीले रंग की वस्तुओं की सूची प्राप्त होगी:

<html>
    <head>
        <style>
            li { color: blue }
            li:odd { color:green }
            li:even { color:red }
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
html  css  css-selectors 
— आर्मंड
स्रोत

जवाबों:

630

डेमो: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
स्निपेट का विस्तार करें

प्रलेखन:

— thirtydot
स्रोत
33
बस एक नोट शायद: nth- बच्चे IE 8 और नीचे द्वारा समर्थित नहीं है।
— मेम
1
यदि आपको IE8 ... और IE6 / 7 का समर्थन करने की आवश्यकता है, तो आप Selectivzr पॉलीफ़िल का उपयोग कर सकते हैं ।
— रिकार्डो ज़िया
2
बस पुष्टि की है कि Select8izr के साथ भी :nth-child(odd/even)IE8 में काम नहीं करता है।
— रिकार्डो ज़िया
7
यह सच है, यह IE8 में यहाँ दस्तावेज के रूप में काम नहीं करता है: caniuse.com/#feat=css-sel3 लेकिन यह हर प्रमुख ब्राउज़र पर काम करता है ।
— अरोन-कोडिंग
1
सभी IE8 समर्थन के बाद इस मामले में अब चिंता करने की कोई बात नहीं है क्योंकि अभीष्ट व्यवहार सिर्फ 'सहायक' है। यह उपयोगकर्ता को साइट का उपयोग करने से रोकता है और न ही जानकारी खोजने से रोकता है। यह भी (सबसे अधिक संभावना नहीं) वेबसाइट के समग्र स्वरूप को खराब नहीं करता है।
— हाफेनक्रानिक
47

आपके CSS की समस्या आपके छद्म वर्गों के वाक्य-विन्यास के साथ है।

समान और विषम छद्म वर्ग होना चाहिए:

li:nth-child(even) {
    color:green;
}

तथा

li:nth-child(odd) {
    color:red;
}

डेमो: http://jsfiddle.net/q76qS/5/

— केविन गुर्ने
स्रोत
1

सीएसएस विषम और यहां तक ​​कि IE के लिए समर्थन नहीं है। आपको नीचे दिए गए समाधान का उपयोग करने की सलाह देते हैं।

सबसे अच्छा उपाय:

li:nth-child(2n+1) { color:green; } // for odd
li:nth-child(2n+2) { color:red; } // for even

li:nth-child(1n) { color:green; }
li:nth-child(2n) { color:red; }

<ul>
  <li>list element 1</li>
  <li>list element 2</li>
  <li>list element 3</li>
  <li>list element 4</li>
</ul>
— Minh_Bu
स्रोत
0

नीचे सम और विषम सीएसएस रंग लागू का उदाहरण है

<html>
<head>
<style> 
p:nth-child(even) {
    background: red;
}
p:nth-child(odd) {
    background: green;
}
</style>
</head>
<body>

<p>The first Odd.</p>
<p>The second Even.</p>
<p>The third Odd.</p>
<p>The fourth Even.</p>


</body>
</html>
— श्यो दयाल सिंह
स्रोत
0

लेकिन यह IE में काम नहीं कर रहा है। उपयोग करने की सलाह देते हैं: nth-child (2n + 1): nth-child (2n + 2)

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}
<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>
स्निपेट का विस्तार करें

— Minh_Bu
स्रोत
0

: Nth-child (n) चयनकर्ता प्रत्येक तत्व से मेल खाता है, जो कि अपने माता-पिता का प्रकार है, nth बच्चा है। विषम और यहां तक ​​कि ऐसे कीवर्ड हैं जिनका उपयोग उन बाल तत्वों से मेल खाने के लिए किया जा सकता है जिनका सूचकांक विषम है या फिर (पहले बच्चे का सूचकांक 1 है)।

ये वो है जो तुम चाहते हो:

<html>
    <head>
        <style>
            li { color: blue }<br>
            li:nth-child(even) { color:red }
            li:nth-child(odd) { color:green}
        </style>
    </head>
    <body>
        <ul>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
            <li>ho</li>
        </ul>
    </body>
</html>
— अगबुल्ला फेइकेमी
स्रोत
-5 
 <ul class="names" id="names_list">
          <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="1">Ashwin Nair</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="2">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="3">Chirag</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="4">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="15">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="16">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="17">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="18">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="19">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">2</span><li class="part2" id="188">Anil Reddy</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="111">Bhavesh</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="122">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">0</span><li class="part1" id="133">Ashwin</li></a>
            <a href="javascript:void(0);"><span class="badge">0</span><li class="part2" id="144">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">5</span><li class="part1" id="199">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">6</span><li class="part2" id="156">Ashwin</li></a>
           <a href="javascript:void(0);"><span class="badge">1</span><li class="part1" id="174">Ashwin</li></a>

         </ul>    
$(document).ready(function(){
      var a=0;
      var ac;
      var ac2;
        $(".names li").click(function(){
           var b=0;
            if(a==0)
            {
              var accc="#"+ac2;
     if(ac=='part2')
     {
    $(accc).css({

    "background": "#322f28",
    "color":"#fff",
    });
     }
     if(ac=='part1')
     {

      $(accc).css({

      "background": "#3e3b34",
      "color":"#fff",
    });
     }

              $(this).css({
                "background":"#d3b730",
                "color":"#000",
            });
              ac=$(this).attr('class');
              ac2=$(this).attr('id');
    a=1;
            }
            else{

    var accc="#"+ac2;
    //alert(accc);
     if(ac=='part2')
     {
    $(accc).css({

    "background": "#322f28",
    "color":"#fff",
    });
     }
     if(ac=='part1')
     {

      $(accc).css({

      "background": "#3e3b34",
      "color":"#fff",
    });
     }

     a=0;
    ac=$(this).attr('class');
    ac2=$(this).attr('id');
    $(this).css({
                "background":"#d3b730",
                "color":"#000",
            });

            }

        });
— अश्विन विनोद कृष्णन
स्रोत
3
यह सिर्फ ... भयानक है। यहां तक ​​कि / विषम तत्वों को लक्षित करने के लिए कई बेहतर तरीके हैं। इसके अलावा, सीएसएस की दो लाइनें एक ही बात को पूरा करने पर जावास्क्रिप्ट का उपयोग करने का कोई कारण नहीं है।
— डस्टिन हाल्टेड
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.