PDA

View Full Version : ID or CLASS in CSS



andrew1234
Mar 30th, 2007, 02:31 PM
Hi please can you tell me why you would use an ID or CLASS in CSS

example below

thanks Andrew



<style>
.mybutton1{ margin 2px;}

#mybutton1{ margin 4px;}

</style>

<html>
<body>
<div id="mybutton1"> </div>

<div class="mybutton1"> </div>
</body>

</html>

Nightfire
Mar 30th, 2007, 02:33 PM
An ID is for one element only per page, a class can be used for multiple things on the same page.

VIPStephan
Mar 30th, 2007, 02:35 PM
An ID is only allowed once in a document while classes of the same name can occur multiple times. Also IDs have a higher specifity than classes: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

nexosis
Mar 30th, 2007, 03:05 PM
An ID is only allowed once in a document while classes of the same name can occur multiple times.


Is it regarding to validation or browser compatibility?

jlhaslip
Mar 30th, 2007, 03:09 PM
*edit*

The Specifications of HTML. The validator only checks the page against the specs. The Browser simply displays the page according to the rules it has been given (the specs).

http://www.w3.org/TR/CSS21/selector.html

the single occurence of ID on a pg is : http://www.w3.org/TR/CSS21/selector.html#id-selectors

felgall
Mar 30th, 2007, 09:26 PM
When using stylesheets to position individual elements on the page and to provide ways for Javascript to reference specific elements use an id.

For setting colours, fonts etc use one or more classes so that the same style can be applied to all of the elements that you want to have that appearance.

Arbitrator
Mar 30th, 2007, 09:51 PM
The differences that I can think of:

The first is semantic. An ID is the defining label for a single element whereas a class is the label for a group of elements. It’s true that a class of one (in other words, a class name that the author expects to only be assigned to a single element) is fine, but an ID would be a better choice in such case as it indicates that the label is unique. Semantically, it should define exactly what the element is/means.
The second is CSS specificity, as VIPStephan noted. ID selectors have greater specificity than class selectors. That’s obvious enough if you consider the nature of an ID and that the root word of the concept called “specificity” is “specific”; an ID is more specific, so it has priority.
One reason to use IDs is so that you can use the Java​Script method getElementById(). That method makes things much easier than searching for individual elements using things such as loops.
You can link to fragments of a document (elements with IDs) by using a fragment identifier at the end of a URI (e.g., document.html#fragment).
You can assign a single element to multiple classes but to only one ID.

That’s all that I can think of off the top of my head. The short and simple is that if you’re about to assign a class that only applies to one element, use an ID instead.


Is it regarding to validation or browser compatibility?The spirit of an ID is that it only refers to (identifies) a single element. The answer to your question is “both”. The DTD (which is used to validate) defines which attribute is the ID attribute. The point of a DTD is to ensure compatibility through conformance.

andrew1234
Apr 6th, 2007, 11:58 AM
Thanks for the help

Andrew