Correctly setting the CSS styling for a class of divs

Question

I have a bunch of similar divs, that I want to style as rectangles. For short example, I have:

  <div id="foundation1" class="emptySlot"></div>
  <div id="foundation2" class="emptySlot"></div>
  <div id="foundation3" class="emptySlot"></div>

I made them all have class "emptySlot" so that we can easily set the external styling. I tried the following for the styling without success:

emptySlot { 
    #rectangle {
    width:       50px;
    height:      100px;
    background:  blue;
    }
}

I pointed my browser to these files, but it appeared to have no effect. I am completely new to web technologies, so please help me get started (or point me somewhere!)

Thanks for all the help!

EDIT: An important feature I would like is unique positions of the rectangles on the screen, what is a good solution for this in terms of minimal code? Should this be in the HTML or the CSS? It would be nice for every div to have the same styling, and then be able to specify unique positions. It looks like the best place for that would be HTML.

Answer 1

emptySlot { 
    #rectangle {
    width:       50px;
    height:      100px;
    background:  blue;
    }
}

This syntax in CSS isn't correct, first a class is represented by adding a dot . before its name, such as:

.emptySlot {
}

Second, you can't have a style inside a style in pure CSS.

There are different ways to assign these "rectangle" styles to your divs.

Method 1

/* First Div */
.emptySlot:nth-child(1) { 
    width:       50px;
    height:      100px;
    background:  blue;
}
/* Second Div */
.emptySlot:nth-child(2) { 
    width:       50px;
    height:      100px;
    background:  blue;
}

Method 2

/* First Div */
#foundation1 { 
    width:       50px;
    height:      100px;
    background:  blue;
}

And so on.. There's more methods of course...