IDs vs Classes Identity Defined
For Education Purposes only. The body content is from CSS Tricks website. h t t p s : / / c s s - t r i ck s . c o m / t h e - d i f f e r e n c e - b e t w e e n - i d - a n d - c l a s s / Layout and all other elements were designed by Andrea Batts-Latson
Web Challenge Weekly | 16 March 2016
IDs vs Classes Identity Defined
IDs and Classes are “hooks”
W
e need ways to describe content in an HTML/ X HTML document. The
basic elements like <h1>, <p>, and <ul> w ill often do the job, but our basic set of
The hashtag, pound sign, octothorpe, number sign, or whatever you prefer to call it, is the symbol of an ID.
C l a s s e s a r e N OT unique You can use the same class on multiple elements. You can use multiple classes on the same element. A ny st yling information that needs to
tags doesn’t cover ever y possible t y pe of
I D ’s a r e u n i q u e
be applied to multiple objects on a page
page element or layout choice. For this
• Each element can have only one ID
should be done w ith a class.
chance to target this unordered list
• Each page can have only one element w ith that ID
specif ica lly, so that we may manipulate
W hen I was f irst learning this stuff, I
Th e r e a r e n o browser defaults for any ID or Class
we need IDs and Classes. For example <ul id=”nav”>, this w ill give us the
it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to sig nif y it, for example a footer, where we might do something like this: <div id=”footer”>. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class=”sidebar-box”>. These ID’s and Classes the “ hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our st yling, but other web lang uages like Javascript depend on them too. But what is the difference bet ween them?
heard over and over that you should only use ID’s once, but you can use classes over and over. It basica lly went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/ CSS person, this attitude can persist because to you, they rea lly don’t seem to do any thing different. Here is one: your code w ill not pass va lidation if you use the sa me ID on more than one element. Va lidation should be important to a ll of us, so that a lone is a big one. We’ ll go over more reasons for uniqueness as we go on.
You r code w ill not pass validat ion if you use the same I D on more than one element.
Adding a class name or ID to an element does nothing to that element by default. This is something that snagged me as a beginner. You are work ing on one site and f ig ure out that applying a particular class name f i xes a problem you are having. Then you jump over to another site w ith the same problem and tr y to f i x it w ith that same class name think ing the class name itself has some magica l propert y to it only to f ind out it didn’t work. Classes and ID’s don’t have any st yling information to them a ll by themselves. They require CSS to target them and apply st yling.
Web Challenge Weekly | 16 March 2016
T he dot, circle, bullet, period, or whatever you prefer to call it, is the symbol of a CLASS.
C S S d o e s n ’t c a r e Regarding CSS, there is nothing you can do w ith an ID that you can’t do w ith a Class and vise versa. I remember when I was f irst learning CSS and I was having a problem, sometimes I would tr y and troubleshoot by sw itching around these va lues. Nope. CSS doesn’t care.
Javascript cares JavaScript people are a lready probably more in tune w ith
I D ’s h a v e s p e c i a l b r o w s e r functionality
C
lasses have no specia l abilities in the browser, but ID’s do have one ver y important trick up their sleeve. This is the “ hash va lue” in the URL. If you
have a URL like http://yourdomain.com#comments, the browser w ill attempt to locate the element w ith an ID of “comments” and w ill automatica lly scroll the page to show
the differences bet ween classes and ID’s. JavaScript depends on there being only one page element w ith any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar w ith jQuer y, you k now how easy it is to add and remove classes to page elements. It is a native and built in function of jQuer y. Notice how no such function exists for ID’s. It is not the responsibilit y of JavaScript to manipulate these va lues, it would cause more problems than it would be worth.
that element. It is important to note here that the browser w ill scroll whatever element it needs to in order to show that element, so if you did something specia l like a scrollable DI V area w ithin your reg ular body, that div w ill be scrolled too. This is an important reason right here why having ID’s be absolutely unique is important. So your browser k nows where to scroll!
I f yo u d o n ’t n e e d t h e m , d o n ’t use them A s you can see, classes and ID’s are ver y important and we rely on them ever y day to do the st yling and page manipulation that we need to do. However, you should use them judiciously and semantica lly.
w h a te v e r e le m e nt i t ne ed s t o i n o r d e r to sh o w th a t e le ment , There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a ver y good idea. so i f yo u d i d so met hing spe ci a l li k e a scr o lla b le DIV a r e a w i th i n y o u r r e g u la r bo d y, It i s i m p o r t a nt to th a t d i v w i ll b e scr o lle d t o o . n o t e her e t ha t th e b r o ws er wi l l scr o ll L e a r n m o r e a b o u t I D s a n d C l a s s e s h e r e . E l e m e n t s c a n h ave B OT H
Web Challenge Weekly | 16 March 2016
Play this video for a quick breakdown of IDs & Classes.
Web Challenge Weekly | 16 March 2016
Th i s
concludes
IDs
&
Classes.
our
tutorial
H o p e f u l l y,
on you
learned something or have a better understanding of how they work.
Any questions or concerns, contact happieTeach at teach2u4fun@gmail.com. Until next time...