CSS structure design - css

Question

I have more than twenty divs.
The divs have id's of #div_1,#div_2,#div_3...
Each div has a button and an image. and they are named the same in each div: #button_1, #image_1.
Is it possible to construct my css like this:
#div1 {
#button_1{ };
#image_1{};
}
#div2 {
#button_1{};
#image_1{};
}

Answer 1

First things first, you should never use the same ID more than once in a single page. The whole point of an ID is that it is unique.
Therefore, having a button called id='button_1' inside each of your divs is wrong.
If you want to use the same reference multiple times, use a class instead of ID. So your buttons, for example, should be class='button_1' instead.
Secondly, the CSS syntax you're asking for is not correct. You can't nest CSS in this way. However, what you're asking for can be achieved quite easily; simply chain the selectors together like so:
#div1 .button_1 { ... }
#div1 .image_1 { ... }
#div2 .button_1 { ... }
#div2 .image_1 { ... }
etc.
However, if the images and buttons are similar between, you don't need to specify the styles twice, just create a CSS block for the two classes that contain the shared styles:
.button_1 { ... }
.image_1 { ... }
Any styles that are different between them you can still declare in the same way as discussed before, so your whole CSS could look like this:
/* shared styles for all the buttons */
.button_1 { ... }
/* shared styles for all the images */
.image_1 { ... }
/* extra styles only applying to the ones in div1 */
#div1 .button_1 { ... }
#div1 .image_1 { ... }
/* extra styles only applying to the ones in div2 */
#div2 .button_1 { ... }
#div2 .image_1 { ... }
...etc.
Hope that helps.

Answer 2

IDs are unique, you should not repeat them in a page. You can't have multiple #button_1's and #image_1's
What you really should be doing is:
HTML
<div id="div-1" class="foo">
<button id="button-1">Hello</button>
<img src="blah.gif" id="img-1" />
</div>
<div id="div-2" class="foo">
<button id="button-2">Hello</button>
<img src="blah.gif" id="img-2" />
</div>
<div id="div-3" class="foo">
<button id="button-3">Hello</button>
<img src="blah.gif" id="img-3" />
</div>
CSS
.foo { ... }
.foo button { ... }
.foo img { ... }
Note that to style the buttons and images inside the divs you don't actually need to give them IDs

Answer 3

No, you can't write your CSS like that. In any case, if you find yourself styling 20 individual DIVs in a series then you're doing something wrong. It would be simpler for you to write styles for the classes rather than writing them for IDs

Answer 4

What you can do is write something like :
#div2 #button_1{
}
#div2 #image_1{
}
if you are trying to make the CSS rules only available to the objects inside a certain div (in the example above they only apply to divs inside div2.

Answer 5

Take a look at http://sass-lang.com/ you want to use a mixin