Which attribute of a <div> tag should reference the CSS?

Question

This is probably a case of trying to run before I can walk, however... I have the following code:

<div class="hidden" id="repair_complete">
  // some code
</div>

I was under the impression that if my CSS file contained:

#hidden {
 display: none;
}

... then the div content wouldn't display. However, it seems to only adopt this behaviour if the CSS file contains a reference to the div id:

#repair_complete {
  display: none;
}

In a book I'm working through the opposite seems to be true - the style sheet refers to the class name, not the id.

Any ideas where I'm going wrong?!

Answer 1

Your CSS syntax is incorrect.

If you want to access this div, you can do it like this:

/* By class: */
.hidden {
  display: none;
}

/* By ID: */
#repair_complete {
  display: none;
}

Note that to access an element by class you use a dot before the class name. You use a hash before the ID.

Answer 2

You need:

.hidden{
   display:none;
}

period is a class specifier, pound sign is for id's.

Answer 3

A "." before the name will refer to classes, and a "#" will refer to ids:

.hidden
{
    display: none;
}

Answer 4

To use class name use the dot.

i.e.

.hidden refers to the class name
#repair_complete refers to the id.

Answer 5

To refer to an element's ID you use the # selector, to refer to it's class name you use the . selector.

So in your example you would use

#repair_complete {
display:none;
}

or

.hidden {
display:none;
}

Answer 6

The other answers have the technical stuff right: you need .hidden, not #hidden.

Now you have to decide whether you want to attach CSS to divs by class or id. I find classes are better in the long run, unless you are really certain that there will ever really and truly be one of the thing you are making.

Also, don't forget that you can attach more than one class to an element:

<div class="red fat shallow">blah blah</div>

Then you can style this element with any of these selectors:

.red {...}
.fat {...}
.shallow {...}
.red.fat {...} /* Applies only to things that are both red and fat */
.red.fat.shallow {...} /* Very specific */
/* etc. */