How to change colors for alternate buttons using CSS?

Question

I have the following code. I have two background images for buttons - "lightSquare.jpg" and "darkSquare.jpg". Currently, all buttons have the background image called "darkSquare.jpg". What I want to do is have alternate buttons have light and dark images, like a chessboard. How could that be done?

  <html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The Main Page</title>
  </head>
  <body>
    <table>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>

       </table>
    </body>
   </html>

The CSS is as follows -

  button 
  {
   background-image:url('darkSquare.jpg');  
   width:50px; 
   height:50px; 
   border: 0
  }

  table
  {
   border-collapse: collapse;
  }

td { padding:0; }

score 4 · Accepted Answer · edited May 23 '17 at 12:25

4

Not the exact same use case, but this would be accomplished exactly the same way as this:

Alternate table row color using CSS?

Given your current HTML, you can do it with nth-child like this:

td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}

If you want a checkerboard look, you can use more advanced CSS chaining.

tr:nth-child(even) td:nth-child(odd) button {
    background-image:url('darkSquare.jpg')
}
tr:nth-child(even) td:nth-child(even) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(odd) button {
    background-image:url('lightSquare.jpg')
}
tr:nth-child(odd) td:nth-child(even) button {
    background-image:url('darkSquare.jpg')
}

Be aware this gets really fragile the more complicated it gets, but as long as your HTML doesn't change, it's fine.

Also, as far as I know, IE doesn't support nth-child (it's possible the newest versions do, I'm not sure).

edited May 23 '17 at 12:25

Community

1
1

answered Feb 22 '12 at 19:26

mWillis

973
5
18

Ok, now, the output is something like this (dark = D, light = L)- Row 1 - D L D L D L D L Row 2 - D L D L D L D L What if I want to reverse the order in row 2? I am looking for a chessboard type coloring. – CodeBlue Feb 22 '12 at 19:50
In the original, it's applying the dark background to every odd `td`'s button, and the light background to every even one's. Because you have the same number of `td`s per `tr`, you get vertical stripes. In order to get opposite ordering on each `tr`, you have to move up a level. So for every even `tr`, we style the odd `td`s with the dark background, and the even `td`s with the light. For every odd `tr`, we style the odd `td`s with the light background and the even `td`s with the dark. I modified the order of the CSS rules in my answer so it would make a little more sense. – mWillis Feb 22 '12 at 20:26
Also, be aware that JavaScript is another valid option, and could prove simpler in your use case. Take a look at the link I gave as well. – mWillis Feb 22 '12 at 20:31
So here you are writing the code for 4 "tr"s? So if I have to make a chessboad, I'll need 8 such "tr"s then. Am i right? – CodeBlue Feb 22 '12 at 20:36
No, the second bit of code I gave renders your chessboard pattern. You just have to have opposite rendering for every other `tr`. Notice how the first two rules in the second code block both refer to even `tr`s, and the second two rules refer to the odd `tr`s. – mWillis Feb 22 '12 at 20:43

score 2 · Answer 2 · answered Feb 22 '12 at 19:25

2

Try adding this css

button:nth-child(even) {
    background-image:url('darkSquare.jpg')
}
button:nth-child(odd) {
    background-image:url('lightSquare.jpg')
}

See this jsFiddle

answered Feb 22 '12 at 19:25

jacktheripper

13,953
12
57
93

This made all buttons "light". – CodeBlue Feb 22 '12 at 19:28
Please see this - http://jsfiddle.net/pjQsq/ What am I doing wrong? Why are the colors not changing? – CodeBlue Feb 22 '12 at 19:35
Because its the elements are siblings not children! You cannot use a table, instead please use CSS to align it – jacktheripper Feb 22 '12 at 19:38
I have to use this table. Is there any way I can do it with the table in place? – CodeBlue Feb 22 '12 at 19:42
You could use javascript, do you want me to give you a JS example? – jacktheripper Feb 22 '12 at 20:15

score 1 · Answer 3 · answered Feb 22 '12 at 20:34

I did it like this -

   <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
              <td><button class="darkSquare"></button></td>
            </tr>
            <tr>
              <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
            </tr>

CSS -

        .lightSquare
         {
            background-image:url('lightSquare.jpg');
         }

        .darkSquare
         {
            background-image:url('darkSquare.jpg'); 
         }

Yes, I am a CSS newbie.

How to change colors for alternate buttons using CSS?

3 Answers3