Skip to content Skip to sidebar Skip to footer
Home / How to Know Which Class Id You Are

How to Know Which Class Id You Are

Post a Comment

ID's and classes are "hooks"!

We need ways to describe content in an HTML/XHTML document. The basic elements similar <h1>, <p>, and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and Classes. For example <ul id="nav">, this volition requite u.s. the take chances to target this unordered list specifically, so that nosotros may dispense it uniquely to other unordered lists on our page. Or nosotros might have a section on our page that has no relevant tag to signify it, for instance a footer, where nosotros might do something like this: <div id="footer">. Or perhaps we accept boxes in our sidebar for keeping content over there separated in some fashion: <div grade="sidebar-box">.

These ID'south and Classes the "hooks" we need to build into markup to get our hands on them. CSS apparently needs these so that we may build selectors and do our styling, but other web languages like JavaScript depend on them too. But what is the divergence betwixt them?

ID'southward are unique

  • Each chemical element can take only one ID
  • Each page can have simply i element with that ID

When I was first learning this stuff, I heard over and over that you should just apply ID's in one case, but you tin apply classes over and over. It basically went in ane ear and out the other considering information technology sounded more than like a expert "rule of pollex" to me rather than something extremely important. If yous are purely an HTML/CSS person, this attitude can persist because to y'all, they actually don't seem to practice anything different.

Here is 1: your code will not laissez passer validation if you utilize the same ID on more than one element. Validation should be important to all of united states of america, so that alone is a big one. We'll go over more reasons for uniqueness as we go along.

Classes are not unique

  • You tin can use the same class on multiple elements.
  • You can utilize multiple classes on the same chemical element.

Any styling information that needs to be applied to multiple objects on a page should exist washed with a class. Accept for example a page with multiple "widgets":

          <div class="widget"></div> <div grade="widget"></div> <div class="widget"></div>

You can at present apply the class proper name "widget" every bit your hook to utilize the aforementioned gear up of styling to each one of these. Simply what if you lot demand 1 of them to be bigger than the other, but yet share all the other attributes? Classes has you covered there, as y'all tin can apply more than one class:

          <div course="widget"></div> <div form="widget big"></div> <div class="widget"></div>

No demand to brand a make new form name here, just apply a new form right in the class aspect. These classes are space-delimited and most browsers back up any number of them (actually, it's more than like thousands, merely way more than than you'll ever demand).

There are no browser defaults for any ID or Grade

Calculation a course proper name or ID to an chemical element does nothing to that element by default.

This is something that snagged me every bit a beginner. You are working on ane site and figure out that applying a detail class proper noun fixes a problem you are having. So you lot jump over to some other site with the same problem and attempt to fix it with that aforementioned class name thinking the class name itself has some magical property to it only to find out it didn't piece of work.

Classes and ID'due south don't have any styling data to them all by themselves. They require CSS to target them and apply styling.

Barcodes and Serial Numbers

Maybe a proficient illustration hither is bar codes and serial numbers. Have an iPod in a store. On the packaging will be a bar lawmaking. This tells the shop what the product is, and then when information technology is scanned, the system knows exactly what the production is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same blazon have the exact same bar code on them.

The iPod will also have a serial number on it which is admittedly unique to whatsoever other iPod (or any other device) in the globe. The serial number doesn't know the cost. It could, but for the store this wouldn't exist a very efficient way to store and use that data. Much easier to employ the barcode, then that for example, if the price inverse, you lot could just change the toll for that bar code and non every individual serial number in your system.

This is much like ID'south and Classes. Information that is reusable should be kept in a class and information that is totally unique should be kept in an ID.

ID's have special browser functionality

Classes have no special abilities in the browser, just ID's do have one very of import pull a fast one on upwards their sleeve. This is the "hash value" in the URL. If you take a URL like http://yourdomain.com#comments, the browser volition effort to locate the chemical element with an ID of "comments" and will automatically curlicue the page to show that element. It is important to notation here that the browser volition scroll whatever chemical element it needs to in social club to show that element, then if you did something special like a scrollable DIV surface area within your regular body, that div will be scrolled too.

This is an important reason correct here why having ID'south be absolutely unique is important. And so your browser knows where to scroll!

Elements can have BOTH

In that location is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Have for example the default markup for a WordPress comment list particular:

          <li id="comment-27299" class="item">

It has a class applied to it that you lot may want for styling all comments on the page, but information technology likewise has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for straight linking. Now I tin can link directly to a particular comment on a particular page easily.

CSS doesn't care

Regarding CSS, there is nothing you tin do with an ID that you tin can't do with a Class and vise versa. I remember when I was commencement learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn't care.

JavaScript cares

JavaScript people are already probably more than in tune with the differences between classes and ID's. JavaScript depends on there being only one page chemical element with any particular id, or else the commonly used getElementById office wouldn't be dependable. For those familiar with jQuery, you lot know how easy it is to add together and remove classes to folio elements. It is a native and built-in function of jQuery. Observe how no such office exists for ID's. It is non the responsibility of JavaScript to manipulate these values, information technology would crusade more problems than it would exist worth.

If you don't need them, don't utilize them

As you tin run across, classes and ID's are very of import and we rely on them every day to do the styling and folio manipulation that we need to practice. Yet, y'all should use them judiciously and semantically.

This means fugitive things like this:

          <a href="https://css-tricks.com" grade="link">CSS-Tricks.com</a>

We already know this chemical element is a link, it's an anchor element! No particular need here to employ a class, as nosotros can already employ styling via its tag.

Besides avoid this:

          <div id="right-col">

ID is accordingly used hither as the folio volition likely only take a unmarried right column, but the name is inappropriate. Try and describe the context of the element, not where information technology is or what information technology looks like. An ID hither of "sidebar" would be more appropriate.

Microformats are just specific class names

Call up microformats are over your head? They aren't! They are just regular markup that make use of standardized class names for the information they comprise. Check out a standard vCard:

          <div class="vcard">   <a course="fn org url" href="http://www.commerce.net/">CommerceNet</a>   <div class="adr">     <span class="type">Work</bridge>:     <div class="street-accost">169 University Avenue</div>     <bridge class="locality">Palo Alto</bridge>,       <abbr class="region" title="California">CA</abbr>       <span course="postal-code">94301</span>     <div class="country-name">United states of america</div>   </div>   <div class="tel">    <span class="blazon">Work</span> +1-650-289-4040   </div>   <div grade="tel">     <span class="type">Fax</span> +1-650-289-4041   </div>   <div>Email:     <span class="email">[email protected]</span>   </div> </div>

gomezpairofterl.blogspot.com

Source: https://css-tricks.com/the-difference-between-id-and-class/

Post a Comment for "How to Know Which Class Id You Are"