Question

In my page i have many table cells.
Inside each cell i have one box (i’m using a spoiler code to show or hide contents inside).
The box is described by a CSS.
The boxes are identical in looks, but I want to customize the properties of each as changing the color or background image
I paste CSS several times equivalent to the number of boxes.
I paste css style before each boxes code.
I try to change the background image of each box (default the color is white) but when i try to change one of these backgrounds, i obtain the same background of ALL boxes.
But it isn’t what I want.

I have severals pictures in folder but it seems like I can not have different background pictures for different boxes..

This is the css style I use.:

<style type='text/css'>
            div.myautoscroll {
            height: 80ex;
            width: auto;
            background: white;
            background-image: url(cieloprato.jpg);
            overflow: hidden;
            border: 1px solid #444;
            margin: 1em;
        }
        div.myautoscroll:hover {
            overflow: auto;
        }
        div.myautoscroll p {
            padding-right: 16px;
        }
        div.myautoscroll:hover p {
            padding-right: 0px;
        }


  </style>

The background image for 1st box is cieloprato.jpg. But i want insert different image for box2 like bastman.png, for box3 spiderman.gif.
How Can I change background image or CSS style for every box?
Forgive my ignorance

Answer 1

I think there are 3 ways:

Firstly. You may use nth-* css properties, but it does not work in old browsers.

.myautoscroll:nth-of-type(2) { 
  background: #3e3;
}

This code change background color in 3 div with this class.

Secondly. You may add to each div element unique identifier or class, and get it by according selector in css.

<div class="myautoscroll" id="mas1">...</div>
<div class="myautoscroll" id="mas2">...</div>

#mas1 {
  ...
}

#mas2 {
  ...
}

Thirdly. You may add to each div element style attribute where you point which background you want.

<div class="myautoscroll" style="background: #0f3">...</div>
<div class="myautoscroll" style="background: #1f3">...</div>

Fourthly. You may do this by loop in JavaScript (it is just example):

var elements = document.getElementByClassName('myautoscroll');

for (var i in elements) {
  var el = elements[i];
  el.style.background = '#' + (i % 10) + 'f3';
}