আমি কীভাবে এমনকি বিজোড় উপাদানগুলিকে স্টাইল করতে পারি?

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 
— করুন Armand
সূত্র

উত্তর:

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
কেবলমাত্র একটি নোট সম্ভবত: নবম-বাচ্চা IE 8 এবং নীচে দ্বারা সমর্থিত নয়।
— এমইএম
1
আপনি ব্যবহার করতে পারেন Selectivzr আপনি পাশাপাশি IE8 ... এবং IE6 / 7 সমর্থন করার জন্য প্রয়োজন polyfill।
— রিকার্ডো জিয়া
2
কেবল নিশ্চিত করেছেন যে সেলেকটিভিজারের সাথেও :nth-child(odd/even)আইই 8 তে কাজ করে না।
— রিকার্ডো জিয়া
7
সত্য, এটি এখানে দলিল হিসাবে আইই 8 তে কাজ করে না : ক্যানিউস.com / #feat=css-sel3 তবে এটি প্রতিটি বড় ব্রাউজারে কাজ করে ।
— অ্যারন-কোডিং
1
সর্বোপরি IE8 সমর্থন এই ক্ষেত্রে আর উদ্বিগ্ন হওয়ার কিছু নেই কারণ উদ্দেশ্যমূলক আচরণটি কেবল 'সহায়ক'। এটি ব্যবহারকারীকে সাইটটি ব্যবহার করা বা তথ্য সন্ধান থেকে বাধা দেয় না। এটি এমনকি (সম্ভবত না) ওয়েবসাইটের সামগ্রিক চেহারা লুণ্ঠন করে না।
— হাফেনক্রিনিচ
47

আপনার সিএসএসের সমস্যাটি আপনার সিউডো-ক্লাসের বাক্য গঠন নিয়েই রয়েছে।

এমনকি অদ্ভুত সিউডো-ক্লাসগুলি হওয়া উচিত:

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

এবং

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

ডেমো: http://jsfiddle.net/q76qS/5/

— কেভিন গুর্নে
সূত্র
1

সিএসএস বিজোড় এবং এমনকি আইই সমর্থন করে না। নীচে সমাধান ব্যবহার করার পরামর্শ দিচ্ছি।

সব থেকে ভালো সমাধান:

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 তে কাজ করছে না। ব্যবহারের পরামর্শ দিন: নবম-শিশু (২ এন + 1): নবম-শিশু (2 এন + 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

: নবম-শিশু (এন) নির্বাচক তার পিতামাতার প্রকারের নির্বিশেষে নবম শিশু যে প্রতিটি উপাদানগুলির সাথে মেলে। বিজোড় এবং এমনকি এমন কীওয়ার্ডগুলি যা শিশুদের উপাদানগুলির সাথে মিলিয়ে ব্যবহার করতে পারে যার সূচকটি বিজোড় বা এমনকি (প্রথম সন্তানের সূচকটি 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
এটা ঠিক ... ভয়ঙ্কর। এমনকি / বিজোড় উপাদানগুলিকে টার্গেট করার আরও অনেক ভাল উপায় রয়েছে। তদুপরি, জাভাস্ক্রিপ্ট ব্যবহার করার কোনও কারণ নেই যখন সিএসএসের দুটি লাইন একই জিনিসটি সম্পাদন করবে।
— ডাস্টিন হালস্টেড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.