CODEWITHSUNDEEP
css
Goaler444
Goaler444

Reputation: 2621

Multiple ids with div not working in css

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

Upvotes: 0

Views: 93

Answers (3)

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

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

Upvotes: 0

jgthms
jgthms

Reputation: 864

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

Upvotes: 4

webextensions.org
webextensions.org

Reputation: 739

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

Upvotes: 2

Related Questions