Geek Answers Handbook

HTML classes with identifiers

I'm a little confused about HTML classes and identifiers, as I would like to use them to describe an HTML element. Is this valid and supported by most browsers?

The motivation for me to use both is as follows:

  • I have a CSS style that I would apply to multiple elements.
  • I have AJAX and Javascript that will manipulate the same elements, so I need a way to determine which element uses the identifier.
  • Therefore, I would like to use an identifier to identify each element for manipulating JS. And at the same time, I would like to specify a class so that the same style applies to the same css.
+4
source share
6 answers

The identifier will be unique for only one element, where the class can be used to group many elements together. You can use them together, as you stated, ID as a unique identifier for Javascript and a class for markup using CSS.

Find the html vs id class to get many articles on this topic.

Example:

<ul> <li class="odd" id="item1">First Item in the List</li> <li class="even" id="item2">Second Item in the List</li> <li class="odd" id="item3">Third Item in the List</li> </ul>
+8
source

Yes, it is perfectly fair to use both the ID and Class properties in the same element. Example:

 <div class="infoBox" id="myUniqueStyle"> *content* </div>

However, keep in mind that an identifier can only be used once (hence its name), while you can use classes as many times as you want to get the document. You can use both an identifier and a class to apply styles, while only an identifier is an easy way to access an element through javascript.

A good way to do this is to apply identifiers to all unique elements (title, navigation, main containers, etc.) and classes for everything else.

"Is" applies "to elements using an identifier:" This is a navigation bar, "" this is a title "

"Is" or "is" applies "to elements using classes:" This is blogPost "," this is infoBox ", etc.

+7
source

You can definitely use both options if you need to.

An identifier is usually used to determine the structural sections of your site - you should have only one element with a specific identifier, and any element can have only one identifier.

A class is used to set styles that can be used in more than one place in your HTML file - any element can have several classes.

A typical HTML document using both identifiers and classes can be something like

 <html> ... <body> <div id="header"></div> <ul id="nav" class="full-width dark">...</ul> <div id="content"> <div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div> </div> </body> </html>
+2
source

Yes, any normal browser should allow CSS classes to be set regardless of the element identifier. However, setting styles for a specific element (for example, using identifiers) can override styles set through the CSS class.

0
source

Just a very obscure note about combining class and id in your CSS declarations, there is an error with IE6 if you have:

  • two or more pages that have an element with the same id

  • these elements have different class es

  • you design them using the #idname.classname rule

then only the first rule in the stylesheet will take effect.

See this page for more details.

0
source

Yes, this is true in all browsers. The ID only expresses the unique identification of your html control through others, and the class applies some kind of style to it. Use identifiers if there is only one occurrence on a page. Use classes when there is one or more occurrences per page.

-3
source

More articles:


All Articles