Multiple ids with div not working in 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

Doesn't work because you select div in #form8. Try removing div. — Idrizi.A
– Idrizi.A, Commented Jan 20, 2013 at 19:04

jgthms · Accepted Answer · 2013-01-20 19:07:04Z

4

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;
}

answered Jan 20, 2013 at 19:07

jgthms

8648 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Goaler444 Over a year ago

hmm good idea, dont know why I wasnt using a class in the first place. Thanks

webextensions.org · Accepted Answer · 2013-01-20 19:04:38Z

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;
}

answered Jan 20, 2013 at 19:04

webextensions.org

7396 silver badges15 bronze badges

Comments

Siamak Motlagh · Accepted Answer · 2013-01-20 19:08:31Z

0

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

answered Jan 20, 2013 at 19:08

Siamak Motlagh

5,1547 gold badges47 silver badges66 bronze badges

Collectives™ on Stack Overflow

Multiple ids with div not working in css

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related