Jump to content
Stef's Coding Community
Pachino

Class conquers ID tag?

Recommended Posts

Hi all,

 

Just following through the wed designer DVD. Great going so far but one thing has me stumped.

 

Class tags can be named the same as each other where as IDs can’t as they must all have the same name.

If I have understood this correct I am struggling to understand how ID tags are not obsolete.

 

Does anyone else see how you don’t need an ID tag as the Class tag can do its job and more? I obviously not getting this so can someone please elaborate and explain why you need the seemingly superseded ID tag anymore?

 

Thanks in advance.

Share this post


Link to post
Share on other sites
Class conquers ID tag

 

No not really. CSS rule specified by an ID selector will overrule a CSS rule specified by a Class selector.

 

<div id="box1" class="square"></div>

#box1 {
width:100px;
}

.square {
width:50000px;
}

 

Above div will have a width of 100px;

 

Class tags can be named the same as each other where as IDs can’t as they must all have the same name.

 

You mean must all have different name?

 

ID's and classes both serve different purposes. If you wish to style a group of things similarly, then you use Classes, if you want to style an individual item out of a group of similarly styled items, then you put an ID on it and set its CSS rule. ID's are even more useful when using Javascript/jQuery

Share this post


Link to post
Share on other sites
ID's are even more useful when using Javascript/jQuery

Just to briefly expand on this: IDs are really useful when using Javascript because it is significantly faster for the browser to find an #id tag since it is unique, rather than a class. When a browser tries to find an ID element, it can stop as soon as it has found that element. If the browser tries to find a class, it has to search the entire document, since there may be multiple elements with the same class.

Share this post


Link to post
Share on other sites

Hi, thanks for replies.

 

Still not getting the need for two tags that can do exactly the same job.

 

If there was no such thing as an ID tag then it could not over rule the class tag.

 

The class tag seems to be able to do everything the ID tag can and more.

Share this post


Link to post
Share on other sites

You obviously did not understand what BeeDev and Ben (FalkenCreative) wrote. They explained that they don't do exactly the same job and gave you 2 very different reasons.

 

Once you have become more familiar with web design, css and js you will probably hit yourself on the forehead with a "Duh, the penny dropped with a sudden clang" gesture. :P

Share this post


Link to post
Share on other sites

To say it one more time:

 

-- IDs override classes, which may help when writing CSS

-- IDs and classes do different things. IDs have to be unique while the same classes can be used multiple times. This makes things simpler when writing CSS, since as a developer, I know that every time I used an ID, it will only be used once on a page, so it will only affect one element

-- Javascript has significantly better performance when selecting IDs rather than classes. When writing Javascript, if you need to select an element, it's much faster to use an ID.

 

How you use IDs and classes depends on your coding style. In general, I use IDs to define specific sections of the page that won't repeat (header, navigation, content, footer) and then within those IDs I use classes if I need to specify something else.

Share this post


Link to post
Share on other sites

@ Virtual

 

Once you have become more familiar with web design, css and js you will probably hit yourself on the forehead with a "Duh, the penny dropped with a sudden clang" gesture.

 

Hey there, yes I totally expect this to be the case with most of the newbie questions I will ask over the next 6 months. Like I said in my opening post Im obviously not getting this. By this I mean the way I currently see ID and Class tags is obviously wrong, but I still can't see how.

 

@ Falkencreative

 

How you use IDs and classes depends on your coding style. In general, I use IDs to define specific sections of the page that won't repeat (header, navigation, content, footer) and then within those IDs I use classes if I need to specify something else.

 

Im sorry but I still don't see them as different at all. But Im really pleased for your example, and this is how I will use them. At this stage I dont really need to know why, just how to use them correctly as I don't want to get into bad habits that become difficult to correct later.

 

Thanks for all the replies.

Share this post


Link to post
Share on other sites

Just think if ID's as things that can overrule Class css rules. It's especially useful when you have a CMS system, and you don't have much control over the Classes and ID's that the CMS generates, however you have total control over the CSS document. And CMS systems tend to use same classes for many different things.

 

To really understand the usefulness of ID's and Classes working together, you need to read up a bit on "CSS Specificity" I think, because that's where the real usefulness of ID's comes shining through.

Share this post


Link to post
Share on other sites

I see,

 

Ill just put it to bed for now and no doubt get to it as and when. And then like Virtual said wonder what the question was in the first place :rolleyes:

 

 

Thanks for all the replies

Share this post


Link to post
Share on other sites

This will illustrate it better for you, you can see if you run the following code that the ID selector overrides the class selector.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#green {color:green;}
.red {color:red;}
</style>
</head>

<body>

<p class="red">This line will be red</p>
<p id="green" class="red">But this line will be green, because the ID overrides the class</p>
</body>
</html>

Edited by virtual

Share this post


Link to post
Share on other sites

Hi VIrtual,

 

I got how it overrides it. Just cannot see how that is useful at this point.

 

Im more clinging to the fact the ID tag does exactly the same as the class tag yet the class tag can be used multiple times with the same name or not making it superior to the ID tag in my beginners mind.

 

I am correct in saying you could build a site without ID tags and just use Class tags right?

 

As said ill probs understand it better in a month or so.

Share this post


Link to post
Share on other sites

I am correct in saying you could build a site without ID tags and just use Class tags right?

 

You could but, in addition to what virtual said, using id can help you with editing later. If you have only used id once on a page you can find it more quickly if you want to edit it, whereas looking for all instances where a class has been used can take time and you may miss some.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...