4

I have a list of div elements that I'm currently displaying in two columns using CSS float. I would like to "alternate" the border color of these elements. I used alternate in quotes because what I really want is for the two divs in each "row" to alternate. Below is an example of what I want as my end state:

1blue   2green
3green  4blue
5blue   6green
7green  8blue

If I simply use nth-child(even) or nth-child(odd) I get the same color in each column vertically like:

1blue 2green
3blue 4green
5blue 6green
7blue 8green

The divs I want to target are located inside a WordPress loop so I don't have a lot of control over the markup (which is why I was hoping to use CSS nth-child). Unfortunately there isn't any markup that would allow me to target each individual "row".

Is there any kind of nth-child pattern that would allow me to do something like blue[1], green[2],blue[2],etc for an indefinite number of items?

I normally have a very good understanding of CSS but this is hurting my brain a little so thanks in advance for any help!

Improve this question
0

4 Answers 4

Reset to default
12

It seems like you are making a simple checkerboard, so if you set every thing to green, you just need to override everything that needs to be blue. nth-child can also accept a fomula that gives an n or multiple of n with an offset.

As you have them numbered, note that in the right column you have 4 and 8 (next would be 12), so you need every 4th element, and in the left you have 1 and 5 (next would be 9), so you also need the 4th plus one (1 is technically 4*0+1).

There is a fiddle here that demos it, but the relevant code is:

/* Color everything green */
.checkerboard div {
    width:45%;
    display:inline-block;
    background-color:green;
}

/* Then color the appropriate divs blue */
.checkerboard div:nth-child(4n+1),
.checkerboard div:nth-child(4n) {
    background-color:blue;
}

And gives:

css checkerboard

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I made a CSS checkerboard generator: https://codepen.io/RilDev/pen/mdXegEL

enter image description here

For a 4 by 4 checkerboard it would generate this code:

<div class="board">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

<style>
  .board {
    display: grid;
    grid-template-columns: repeat(4, 64px);
  }

  .square {
    width: 64px;
    height: 64px;
    background: black;
  }

  .square:nth-child(8n + 1),
  .square:nth-child(8n + 3),
  .square:nth-child(8n + 6),
  .square:nth-child(8n + 8) {
    background: white;
  }
</style>
Improve this answer

Comments

0

You can just make blue 1 and green 2:

1:nth-of-type(2n+1){
   background-color: green;
}

2:nth-of-type(2n){
   background-color: blue;
}

and make sure the id's are set to 1 and 2 so it works

Improve this answer

Comments

-3

You should use nth-child like this

div:nth-child(1){…your code here…}
div:nth-child(2){…your code here…}
div:nth-child(3){…your code here…}
div:nth-child(4){…your code here…}
div:nth-child(5){…your code here…}
div:nth-child(6){…your code here…}
div:nth-child(7){…your code here…}
div:nth-child(8){…your code here…}

By this you can do anything to each of your 8 div elements.

Improve this answer

11 Comments

What happens if there is a 9th element, or 10th or 100th?
You should just pass the number into the bracket to nth-child like this "div:nth-child(100).
So if I have 12, I'd need... div:nth-child(9){}, div:nth-child(10), div:nth-child(11) and div:nth-child(12)?
That lego storm fellow is one froody programmer.
@LegoStormtroopr ahem, I believe the correct adjective form is "hoopy." As in, "Zaphod's just this guy, you know? He's one hoopy frood."
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.