Differences between classes and IDs
July 18, 2008 7 comments
Especially when in the early studies on development for web, there is common confusion between classes and IDs, and used as needed in XHTML, CSS and Javascript. Several tutorials on the Internet explain some basic points and give some guidelines, but nothing very thorough and illuminating. The result: the doubts persist and the difference between ID and class is not yet "desvendada." In this article this "mystery" comes to an end! ;-)
IDs and classes are "hooks"
We need ways to describe content in documents HTML / XHTML. The basic elements as <h1>, <p> <ul> and often do the job, but the basic set of tags not abragen all possibilities of elements or page layout of choices. For this, we need IDs and classes.
<ul Id="nav"> For example, it gives an opportunity for targeting this list, then there is a way to manipulate this list only regarding other non-ordered lists of the page. Or we might have a section on the page that has no relevance signifcar tag, for example, a footnote, where we could do something like <div id="footer">. Or perhaps we have boxes in the sidebar to keep separate the content in some way: <div class="sidebar-box">.
These IDs and classes are the "hooks" we need to do in the marking to put their hands on them. CSS obviously need it so you can make selectors and mount sheets of styles, but other languages web, as javascript, also depend on them. But what are the differences between IDs and classes?
IDs are unique
- Each element can only have an ID;
- Each page can be only one element with that ID.
When you're learning about it, it is common to hear that one should only use IDs once, but you can use a class several times. Basically, we enter an ear and leaving the other, because it sounds more like a "regrinha" that something really important. If you deal only with HTML / CSS, this can happen to you, too, because they really do not seem to do anything different.
Here vai one: your code vai not pass through the validator if you use the same ID on more than one element. Validation should be important for all of us, so that in itself is something very important. Ahead, more reasons why an ID must be unique.
Classes are not unique
- You can use the same class for several elements;
- You can use several classes for the same element.
Any information of style that must be applied to multiple elements on a page should be done with a class. Take as an example a page with several "widgets":
<Div class = "widget"> </ div> <div class = "widget"> </ div> <div class = "widget"> </ div> Now, you can use the same class "widget" as a hook to apply the same set of styles for each. But, if need one bigger than the other, but continue with a style that shares of other attributes? You can apply more than one class to one element:
<Div class = "widget"> </ div> <div class = "widget big"> </ div> <div class = "widget"> </ div> There is no need to do and appoint a new class here, just put the name of the new class attribute in the class, along with the name of the class that is already there. The different classes are bounded by space and most browsers allow any number of them (actually, is more like thousands, which is much more than is actually needed).
There are patterns of IDs and classes in any browser
Putting a name, or ID in a class element, by default does nothing of that element.
This is something that intrigue who is beginner. You are working on a site and discovered that the application of a class with one name in particular solves a problem you have. Then you move to another site, with the same problem, and tries to fix it the same way, using that same name, class, thinking that the name of class by itself, has some magical property, only to discover that does not work well…
Classes and IDs have no style for themselves. We need to guide and implement CSS styles.
Codes of Barra and Numbers Series
Perhaps the bar codes and serial numbers are a good analogy. Take an iPod, in a store. In the pack there is a barcode. He points to the store that this product is, so when it is scanned, the barcode information that is exactly what product and the cost. You can learn by their color and location of the warehouse in which he was retained. All those iPods have exactly the same kind of bar-code.
The iPod also has a serial number that is absolutely unique regarding any other iPod (or other device) around the world. The serial number does not inform the price. It could, but for the store that sells this would not be an effective way to store and use that information. It is much easier to use a barcode because if, for example, price changes, we need only change the price for that bar-code, not the serial number for each system.
This is very similar to IDs and classes. Reusadas Information we are to be kept in a class and information that are completely unique to be maintained in an ID.
IDs are a special feature in browsers
Classes do not have special features in the browser, but IDs have a very special trick up its sleeve: a "hash value," for URLs If you have a URL as http://seudominio.com # comments, the browser vai try to find the element with id "comments" and vai automatically scroll the page until you get that element.
It is important to note that the browser vai scroll through the page where you want the element is, so if there is something special, as a DIV with scrollbar (CSS property value overflow with "self" or "scroll"), this bar vai be moved to scroll - scroll down - too.
This is an important reason on why it is important to have an ID absolutely unique. With this, the browser knows when to roll.
Elements can have both, ID and Classes
Nothing for you when you use both, ID and classes in a single element. Indeed, doing so in most cases is a good idea. Take, for example, the pattern of marking for a list of items to comment on Wordpress:
<Li id = "comment-27299" class = "item"> It has a class that was applied that perhaps you want to use to estilizar all comments on the page, but there is a single value of ID (dynamically generated by Wordpress). This is easily possible to make a link directly to a comment on a page in particular.
CSS does not mind
On the CSS, there is nothing you can do with an ID that can not do with a class and vice versa. Sometimes, when starting the study of CSS and you have a problem, tries to switch between using ID or use class. The CSS does not mind.
Javascript is important
Those who moves with javascript are probably already more in line between the differences between the classes and IDs. Javascript depends on the existence of a page element with unique ID, or the commonly used function getElementById would not be reliable. Those accustomed to jQuery know how easy adding and removing classes of elements of page. It is a native function in jQuery. See that this function does not exist for IDs. It is not the responsibility of javascript manipulate these values, because it would cause more problems that it would be useful…
If you do not need them, not to use
As you can see, classes and IDs are very important and we use them every day for estilizar pages and manipulate what is needed. However, you should use them with discretion and semantically.
This means avoiding things such as:
<A href = "http://css-tricks.com" class = "link"> CSS-Tricks.com </ a> We already know: this element is a link, is an anchor. There is nothing special there must be a point of specifying a class, since it is possible to apply the tag in their own style ( "a").
Avoid this type of thing, too:
<Div id = "column-right"> The ID is used properly here because, probably, the page will have only a single right column, but the name is inappropriate. Describe the context of the element, not where it is or how it would seem. An ID "bar-side" would be better.
Microformatos are only specific names of classes
Do you think microform is difficult for you? Microformato is just marking that makes regular use of standardized names of classes for information they contain. See this vCard:
<Div class = "vcard"> <a class = "url fn org" href = "http://www.commerce.net/"> CommerceNet </ a> <div class = "adr"> <span class = " type "> Work </ span>: <div class =" street-address "> 169 University Avenue </ div> <span class =" locality "> Palo Alto </ span>, <abbr class =" region "title = "CA"> CA </ abbr> <span class = "postal-code"> 94301 </ span> <div class = "country-name"> USA </ div> </ div> <div class = "tel" > <Span class = "type"> Work </ span> 1-650-289-4040 </ div> <div class = "tel"> <span class = "type"> Fax </ span> 1- 650-289-4041 </ div> <div> Email: <span class = "email"> info@commerce.net </ span> </ div> </ div> 
Excellent subject! Clara and objective, congratulations!
@ Helaine
Thank you very much, Helaine! As quoted in the article, these differences between IDs and classes generate much confusion, and I believe that this material explains many things.
Abraços and appear! ;-)
Excellent site's full and in this post too. I think if he had not read his guest in the post-match rich would not have discovered so early.
It is indeed good to know that writes to be very good on the Internet in Portuguese.
Abraço!
Muhammad @
Thank you very much! I am happy to hear that you like and hope that you write the articles that are useful!
I am already subscribed to the feed of the Money Machine is time and I say that the contents of them are of very high quality!
Abraços and thanks for visiting!
Trackback on July 18, 2008
Trackback on July 18, 2008
Trackback on July 18, 2008