CSS: how to alternate background colors on grid rows?

Question

Im building something similar to this

so i want to make that (chess) efect where the last element of the grid-row contains the same background color of the first element background color of the second row

I build my container using grid and placed some cards inside of it, is there any way i can do this using css?

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container > a:nth-child(odd) {
  background-color: #4268af;
}

<div class="cards-container">
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
      <a class="card">
        <h4 class="card-name">name</h4>
      </a>
 </div>

Where's the relevant code ? also, `:nth-child(even or odd)` should do it ? — Rainbow, Jul 26 '22 at 18:42
If you use odd or even you will changue the color of the colums, as all odd and even childs are going to be displayed on the same column — , Jul 26 '22 at 18:48
then stagger the starting based on rows being even or odd too — async await, Jul 26 '22 at 18:49
No code to work off of means a shot in the dark, Adding the relevant code will increase the answering process, otherwise it will get your question closed for the lack of clarifications. — Rainbow, Jul 26 '22 at 18:55

score 2 · Answer 1 · edited Sep 14 '22 at 14:19

The wanted selection is 2, skip 2, 2..., can't be done with one selector so we use two.

4n will give us 0, 4, 8, 12, 16, 20... we skip four instead of two

4n+1 will give us 1, 5, 9, 13, 17, 21... we skip four instead of two as well, but starting from an odd number

and if we combine them we get 1, 4, 5, 8, 9, 12, 13, 16, 17, 20, 21...

same for the other selector but we start from the second element

4n+2 will give us 2, 6, 10, 14, 18... skipping four

4n+3 will give us 3, 7, 11, 15, 19... skipping four in the odd departement

and if we combine them we get 2, 3, 6, 7, 10, 11, 14, 15, 18, 19...

Demo

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.card:nth-child(4n),
.card:nth-of-type(4n+1) {
  background: blue;
}

.card:nth-child(4n+3),
.card:nth-child(4n+2) {
  background: red;
}

<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>

</div>

H-DC · Answer 2 · 2022-07-26T19:15:23.843

you can use even and odd on tr and td inside.

tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
  background-color: yellow;
}

tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){
  background-color: blue;
}

<table>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>

</table>

Kameron · Accepted Answer · 2022-07-27T00:33:24.993

-1

If your content is static you can use the :not() selector along with nth-child in your CSS to select the respective cards. See below.

.cards-container {
  display: grid;
  grid-template-columns: repeat(2, 10rem);
}

.card {
  border: 1px solid black;
}

.cards-container>.card:not(:nth-child(2), :nth-child(6)):nth-child(even),
.cards-container>.card:not(:nth-child(3), :nth-child(7)):nth-child(odd) {
  background: #4268af;
}

<div class="cards-container">
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
  <a class="card">
    <h4 class="card-name">name</h4>
  </a>
</div>

edited Jul 27 '22 at 00:33

answered Jul 26 '22 at 20:03

Kameron

10,240
4
13
26

How is this the accepted answer ? this does not scale, You might as well do `nth-child()` for every single element. – Rainbow Jul 26 '22 at 20:19
@Zohini No need to hate on it so much. I said "if your content is static", I know doing it this way isn't dynamic. I would use `n` also if I needed this to be dynamic. However, this way is easy to understand and utilizes the proper use of the `:not()` selector. I gave you +1. – Kameron Jul 27 '22 at 12:32
hate? pointing out something is wrong means hate? and what do you mean `proper use of the :not() selector` ? using `:not()` is a literal overkill for this not to mention it's [side effects](https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description) if one is oblivious to, and since you said `if static` why even include `:not()` instead of simply `:nth-child() 1 .. n` – Rainbow Jul 27 '22 at 12:59
Something being wrong in this instance is solely relative. Luckily, those [side effects](https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description) do not apply to this example. How is it overkill? Does it work? Was simply providing OP with alternative solutions. – Kameron Jul 27 '22 at 13:11

CSS: how to alternate background colors on grid rows?

3 Answers3