Background with different colored rows - css only

Question

is it possible to create a background with rows which are different colored?

Here's some Pseudo-Code to illustrate it:

body {
    row-1 {
        height: 250px;
        background-color: red;
    }
    row-2 {
        height: 250px;
        background-color: yellow;
    }
    .
    .
    .
    row-n {
        height: 250px;
        background-color: green;
    }
}

Is it possible to do that in css only?

"element" `:nth-child(odd){background:red}` – cssyphus Apr 06 '16 at 18:23 — cssyphus, Apr 06 '16 at 18:23

score -2 · Answer 1 · answered Apr 06 '16 at 18:24

-2

You can use gradient to achieve this. You can use a online css gradient generator. Here is an example.

EDIT: I think I misinterpreted your question. Are you just asking how to give different divs in your body different colors? either give them all distinctive classes so you can style each of them independently, or use :nth-child(x) where you replace x with the div number you want to style (e.g. if you want to style the second div, use :nth-child(2)

answered Apr 06 '16 at 18:24

Laurens

2,596
11
21

hmm, don't know if gradient is the proper tool. But thanks I'll lokk into it and no, no html, if possible css only. :) – xotix Apr 07 '16 at 13:14

Background with different colored rows - css only

1 Answers1