Background color for UL element didn't work

I want to highlight every 2 rows alternately like the image below

sample ouput

but I can't make it work using UL element. Here is code https://jsfiddle.net/

3 answers

  • answered 2019-06-25 04:51 Lalji Tadhani

    Add overflow:hidden for UL because your li is floating

    ul{
      overflow:hidden;
    }
    

    ul{
      overflow:hidden;
    }
    li{
        height: 10px;
        width: 32.33%;
        display: block;
        float: left;
        margin-right: 1%;
        margin-bottom: 1%;
    }
    
     ul:nth-child(4n), ul:nth-child(4n-1){
      background: gray;
      color: red;
    
    }
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <ul>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <ul>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    <ul>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul>
    
    <ul>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
    
    <ul>
        <li>20</li>
        <li>21</li>
        <li>22</li>
    </ul>
    <ul>
        <li>23</li>
        <li>24</li>
        <li>25</li>
    </ul>
    <ul>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul>
    
    <ul>
        <li>17</li>
        <li>18</li>
        <li>19</li>
    </ul>
    
    <ul>
        <li>20</li>
        <li>21</li>
        <li>22</li>
    </ul>
    <ul>
        <li>23</li>
        <li>24</li>
        <li>25</li>
    </ul>

  • answered 2019-06-25 04:55 Varun Raval

    You have to target the li inside ul

    ul:nth-child(4n) li, ul:nth-child(4n-1) li{
      background: gray;
      color: red;
    }
    

  • answered 2019-06-25 05:08 Bodige Sridhar

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th, td {
      text-align: left;
      padding: 8px;
    }
    tr:nth-child(4n), tr:nth-child(4n-1){
      background: gray;
      color: red;
    }
    
    </style>
    </head>
    <body>
    
    <h2>Striped Table</h2>
    <p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:</p>
    
    <table>
      <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      </tr>
      <tr>
      <td>Peter</td>
      <td>Griffin</td>
      <td>$100</td>
      </tr>
      <tr>
      <td>Lois</td>
      <td>Griffin</td>
      <td>$150</td>
      </tr>
      <tr>
      <td>Joe</td>
      <td>Swanson</td>
      <td>$300</td>
      </tr>
      <tr>
      <td>Cleveland</td>
      <td>Brown</td>
      <td>$250</td>
      </tr>
      <tr>
      <td>Cleveland</td>
      <td>Brown</td>
      <td>$250</td>
      </tr>
      <tr>
      <td>Cleveland</td>
      <td>Brown</td>
      <td>$250</td>
      </tr>
      <tr>
      <td>Cleveland</td>
      <td>Brown</td>
      <td>$250</td>
      </tr>
    </table>
    
    </body>
    </html>