It wasn’t long ago that I was a clueless wannabe software developer who struggled with even the most basic of concepts. Divs? JQuery? Hell, I couldn’t even tell the difference between a class and an id, which led me to write this blog post.
HTML has a lot of built in styles, but if you want to do anything outside of the given tags, such as
,
or
- , or if you want to customize any of those given styles, you’ll likely be faced with creating classes and ids for them.
- with the same CSS. By giving the
- its own class of “nav”, we can style all of the
- tags with a class of nav with just one block of CSS. If we want to have a style that makes one nav selection bold, it’s as simple as adding another class tag. The attributes of the first nav tag will still persist, so the second class simply adds to the styling. The limit on the number of classes you can apply is in the thousands, so feel free to be as specific as you can be.
Neither IDs nor classes have browser defaults, so simply adding a class name or an ID will do nothing at first. You can’t take a class or ID from one project and simply port it over to another. You have to give them definition, and you do that with CSS.
Browsers recognize IDs but not classes. Because there can only be one element on a page with a specific ID, we can use the url’s hash value to target that ID. Say we have a spot halfway down the page where we are displaying a new product. By giving that products div a class of new-product, we can add it to the URL after a hash to target it like so: http://web.com#new-product. When the page loads, it automatically scrolls to the section with the specified id.
Elements in the DOM can have both classes and ids, and that’s often a really good thing. Use the class to target a group of elements, while you use an id to target just one of those elements.
When it comes to CSS, IDs and classes are treated the same. CSS doesn’t care whether you’re wanting to style a whole class of elements or just one; it’s going to apply the styles regardless. JavaScript, on the other hand, does have an opinion on the matter. Like using a hash in the URL, JavaScript uses IDs to target specific elements with the getElementById() function.
These tags are useful for creating elements that you will target throughout your project. Does your page have a navbar? By giving the the unordered list in the nav bar its own class of nav, you can apply styles that only target elements with that class.
CSS uses these tags to target the styles it imposes on elements, but so do other languages and libraries, such as JQuery and JavaScript, so what exactly is the difference between ID and class?
To start, each element can only have one id, and each page can only have one element with that ID, which makes the id tag very selective. The fact that IDs are intended for just one element and classes can be applied to many elements may seem like a trivial difference to new coders — in fact, many purely HTML and CSS coders can get away with treating them the same — but there are many reasons to keep IDs to just one element and classes to another.
Classes, on the other hand, can apply to multiple elements on a page, and an element can itself have multiple classes. Say, for instance, that we have an unordered list
- and we want to style each
Top comments (0)