CSS: Changing Background of Every Other Element

Here you can learn how to change the background of every second HTML element in a parent with CSS.

2573 views

By. Jacob

Edited: 2019-11-22 10:21

Changing the background of every other element can be done with the :nth-child(odd) and :nth-child(even) CSS rules.

This is a useful trick to style HTML lists and rows in a table. If you have a list or table with a lot of elements in it, then it can be useful to change the background color of every second element. Doing this will increase the contrast and make the elements easier to tell apart from each other.

Note. It also works for other HTML tags, so there is no problem in using same technique for styling div or span.

Here is the CSS using (odd):

ol li:nth-child(odd) {
  background: rgb(240,240,240);
}

/* Standard code */
ol {
  border:1px solid rgb(240,240,240);
  list-style-type:none;
}
li {
  padding:0.5rem;
}

Result:

Hypertext Markup Language
An airplane with one wing
Cascading Style Sheets
Granny's teeth

Lists and tables

We should hesitate to use a HTML table if we are actually dealing with tabular data. There is absolutely nothing wrong with tables.

Lists are best suited for navigation links on a website, while a table may be used when creating a calendar, and for similar tabular data.

To style a table using the odd and even CSS rules, you would simply target the tr element instead of li.

Table style:

table tr:nth-child(even) {background:rgba(240,240,240, 0.5);}
table col:nth-child(odd) {background:rgba(240,240,240,0.6);}

/* Standard styles */
table {border-spacing:0;border-collapse:collapse;}
table tr th {padding:0.5rem;}
table tr td {padding:0.5rem!important;text-align:center;border:none;}

Result:

Monday	Tuesday	Wednesday	Thursday	Friday	Saturday	Sunday
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

The col element was used to enable styling of the columns in the table. This opens up for some pretty cool transparency effects when using rgba to set the background color.

Here is the HTML code for the table:

<table>
 <col><col><col><col><col><col><col>
 <tr><th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th></tr>
 <tr><td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td></tr>
 <tr><td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td></tr>
 <tr><td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td></tr>
 <tr><td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td></tr>
</table>

Lists and tables

Tell us what you think: