Background color for UL element didn't work

Question

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/

There is a similar question here https://stackoverflow.com/questions/56574272/how-to-apply-css-to-3-items-after-every-3-items — Pons Purushothaman, Jun 25 '19 at 04:54
just add------------- ul { height: 18px; margin: 0px; } ---------- in your css it will work — Shakil Hossain, Jun 25 '19 at 05:31

score 1 · Accepted Answer · answered Jun 25 '19 at 04:51

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>

Hi @Lalji Tadhani, I created a custom class and put in UL element it didn't work. Here is the sample code https://jsfiddle.net/Lq51btxo/ — lady coder, Jun 25 '19 at 05:02
check now https://jsfiddle.net/lalji1051/hvL93zc2/1/ your target is wrong — Lalji Tadhani, Jun 25 '19 at 05:05

score 0 · Answer 2 · answered Jun 25 '19 at 04:55

0

You have to target the li inside ul

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

answered Jun 25 '19 at 04:55

Varun Raval

134
6

score 0 · Answer 3 · answered Jun 25 '19 at 05:08

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

I hope it help you out.. – Bodige Sridhar Jun 25 '19 at 05:09 — Bodige Sridhar, Jun 25 '19 at 05:09

Background color for UL element didn't work

3 Answers3