Jump to content

Difference Between <div Id> And <div Class>


sunicani
 Share

Recommended Posts

id and class can be used on basically all elements, not only <div>id is an identifier. This means that only a single element can have one with a specific value.A class is an attribute that applies a style to an element. It can also be used to identify several elements that belong to the same "class".In CSS, you access a class with . and an id with #:

#element { somestyle }.className { somestyle }

In Javascript, you can access elements by their ID:

alert(document.getElementById("ID"));

You can access elements by their class name, but you need to look through them:

var i, x = document.getElementsByTagName("*"),str = "";for (i =0; i < x.length; i++) {  if(x[i].className == "className") {	str += x[i].toString();  }}alert(str);

Link to comment
Share on other sites

id and class can be used on basically all elements, not only <div>id is an identifier. This means that only a single element can have one with a specific value.A class is an attribute that applies a style to an element. It can also be used to identify several elements that belong to the same "class".In CSS, you access a class with . and an id with #:
#element { somestyle }.className { somestyle }

In Javascript, you can access elements by their ID:

alert(document.getElementById("ID"));

You can access elements by their class name, but you need to look through them:

var i, x = document.getElementsByTagName("*"),str = "";for (i =0; i < x.length; i++) {  if(x[i].className == "className") {	str += x[i].toString();  }}alert(str);

Yeah! wonderful, thanks, mate!by the way, when it comes to page speed optimization, experts suggested CSS tips herein below,
Use CSS IDs for main elements that show once on the page (header, content, footer, etc).Use classes for everything else.
is that reasonable?
Link to comment
Share on other sites

Yes. I use IDs for general layout elements, like header, footer, menu, content and navbar.Use classes for things that repeat often in your document:

<div class="news">  <h3>Title</h3>  <p>Content</p></div>

By the way, try to use as little classes and ids as possible and use descendent selectors instead. Here's an example of something that can be fixed up:

<ul class="menu">  <li class="item"><a class="link"></a></li>  <li class="item"></li>  <li class="item"></li></ul>.menu { padding: 0; }.item { list-style-type: none; }.link { display: block; }.link:hover { background-color: red; }

It would be much better like this:

<ul class="menu">  <li class="item"><a class="link"></a></li>  <li class="item"></li>  <li class="item"></li></ul>.menu { padding: 0; }.menu li { list-style-type: none; }.menu li a { display: block; }.menu li a:hover { background-color: red; }

And then there's the other thing: Don't abuse <div> elements.Look at this:

<div id="content">  <div class="header">About Us</div>  <div class="subheader">The company</div>  <div class="text">Some text</div>  <div class="subheader">Other details</div>  <div class="text">Some text</div>  <div class="contact">Contact us at email@domain.com</div></div>

It would be much better like this:

<div id="content">  <h1>About Us</h1>  <h2>The company</h2>  <p>Some text</p>  <h2>Other details</h2>  <p>Some text</p>  <address>Contact us at email@domain.com</address></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...