I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing
<!DOCTYPE HTML> <html> <head> <style> #mycolor1 {color: red;} .mycolor2 {color: red;} </style> </head> <body> <div id="mycolor1"> hello world </div> <div class="mycolor2"> hello world </div> </body> </html> They do not do the same thing.id is used to target a specific element, classname can be used to target multiple elements.
Example:
<div id="mycolor1" class="mycolor2"> hello world </div> <div class="mycolor2"> hello world2 </div> <div class="mycolor2"> hello world3 </div> Now, you can refer all the divs with classname mycolor2 at once using
.mycolor2{ color: red } //for example - in css This would set all nodes with class mycolor2 to red.
However, if you want to set specifically mycolor1 to blue , you can target it specifically like this:
#mycolor1{ color: blue; } Read the spec for the attributes and for CSS.
id must be unique. class does not have to beid has higher (highest!) specificity in CSSidid can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors (<a>)
selecting an element. Selecting by whom? where?
id attribute has many uses, as this answer indicates. It is meant to identify a unique element on your page, and can then be used for numerous things, such as a styling selector, with a URI fragment (for instance, click a link under the Contents box on that Wikipedia page, and see the # placed in the URL and how it scrolls to that section, due to the browser finding a matching id), or as a way to quickly/easily/efficiently select that element in JavaScript for whatever JS functionality you may be writing.Classes should be used when you have multiple similar elements.
Ex: Many div's displaying song lyrics, you could assign them a class of lyrics since they are all similar.
ID's must be unique! They are used to target specific elements
Ex: An input for a users email could have the ID txtEmail -- No other element should have this ID.
The object itself will not change. The main difference between these 2 keyword is the use:
In the CSS or Javascript files:
To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.
Also, ID properties have priority over class properties.
ids and classes are especially useful if you plan on using javascript or any of its frameworks.
class is used when u want to set properties for a group of elements, but id can be set for only one element.
ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS . class and # ID prefixes, so that's pretty much it.
ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...
For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.
In terms of performance:
CSS selectors are matched from right to left.
Therefore, .myClass should be "faster" than #myID because it misses out testing.
The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.
Here is more info on why css is browsers match css selectors from right to left
