or
? I am learning HTML. Can someone please tell me what is the difference between class and id a...">
All geek questions in one place

What to use <div class = "name"> or <div id = "name">?

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? It seems like they are doing the same

<!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>
+6
source share
10 answers

They do not do the same. id used to target a specific element, classname can be used to specify 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 immediately reference the div with the class name mycolor2 using

 .mycolor2{ color: red } //for example - in css

This will set all nodes with class mycolor2 to red .

However, if you want to specifically set mycolor1 to blue , you can target this way:

 #mycolor1{ color: blue; }
+16
source

Read the specification for attributes and for CSS .

  • id must be unique. class should not be
  • id has higher (highest!) specificity in CSS
  • Elements can have several extraordinary classes (separated by spaces), but only one id
  • Faster to select an item by its identifier when querying the DOM
  • id can be used as an anchor target (using a request fragment) for any element. name only works with anchors ( <a> )
+10
source

Classes should be used when you have several similar elements.

Ex: Many divs displaying the lyrics of the song, you can assign them the lyrics class, since they are all similar.

The identifier must be unique! They are used to target specific items.

Ex: the user’s email input may have a txtEmail identifier - no other element should have this identifier.

+1
source

The object itself will not change. The main difference between these keywords is the use of:

  • ID is usually on one page
  • a class can have one or many inputs

In CSS or Javascript files:

  • The identifier will be accessible by the symbol #
  • The symbol will access the class .
+1
source

To do this, it is simple: id is unique to only one element in the entire HTML document, but a class can be added to numerous elements.

In addition, ID properties take precedence over class properties.

Ides and classes are especially useful if you plan to use javascript or any of its infrastructure.

+1
source

class is used when u wants to set properties for a group of elements, but id can be set for only one element.

0
source

The identifier must be unique (specify only one element in the DOM at a time), while classes do not have to be. You have already opened the CSS identifier prefix . and # , so pretty much that.

0
source

An identifier provides a unique identifier for an element if you want to manipulate it in JavaScript. The class attribute can be used to handle a group of HTML elements in the same way, especially with regard to fonts, colors, and other style properties ...

0
source

ID is suitable for items that appear only once, like the logo sidebar

And the class is suitable for elements with the same interface, but they can be displayed more than once. how

.feed in #feeds container

0
source
  • The identifier selector is used when referring to one unique element.
  • The class selector refers to a group of elements.

For example, if you have several buttons that look the same, you should use class = "mybutton" to have a consistent style.

In terms of performance:

CSS selectors match right to left .

Therefore, .myClass must be "faster" than #myID because it skips testing.

Performance frequency is negligible for regular sized pages, and you probably will never notice the difference, so basically this is roughly consistent.

Learn more about why css browsers match css selectors from right to left.

0
source

Source: https://habr.com/ru/post/946193/

More articles:


All Articles