Multiple ids with div not working in css - css

Question

I have the following CSS:
#form1,#form2,#form3,#form5,#form6,#form7,#form8 div{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
For some reason, the last id does not get the style. (ie #form8 does not get the style).
If I switch the css like this (Without changing any html code):
#form1,#form2,#form3,#form5,#form8,#form6,#form7 div{
Now #form7 does not have the style.
Did I code the structure wrongly please? Its very strange

Answer 1

It's probably an HTML markup issue. Can you provide it?
A wild guess is that your code looks like:
<div id="form8">
...
</div>
And the last part of your CSS selector (#form8 div) actually targets a markup like:
<div id="form8">
<div>
...
</div>
</div>
Here's a meta advice: if your selectors list is so long and apparently targets the same type of element (a form), use a class!
.form{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}

Answer 2

Seems you are targeting div#form1, div#form2 ... and so on... You can skip writing div for the selector. Try this
#form1, #form2, #form3, #form5, #form6, #form7, #form8 {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Or even better ... give all of them a class name like <form class="myform" id="whatever"></form> and use:
.myform {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}

Answer 3

You should just use #form1,#form2,#form3,#form5,#form6,#form7,#form8
#foem8 div refers to the all child divs of the element with this is #foem8