Forum Moderators: not2easy
If I define
.myclass {font-family: "verdana";}
#myid {font-family: "verdana";}
the following 2 lines should be the same
<p class=myclass> text </p>
<p id=myid> text </p>
why we need id selector if class selector is well enough? Is there any special situation for better use of id selector?
Thank you.
Here's a practical example:
Say you have an h1 on every page of your site, (as you should) and you have an id assigned to that h1 like this:
[pre]
h1#myheader {
color: blue;
font: bold 1.4em arial, verdana, sans-serif;
}..and in the html
<h1 id="myheader">This Is My Blue Title</h1>
[/pre]
All well and good. But, what if, on one page you want that h1 to be green? --- Assign a class aswell!
[pre]
h1#myheader {
color: blue;
font: bold 1.4em arial, verdana, sans-serif;
}
h1.myoddheader {
color: green;
}...and in your html
<h1 id="myheader" class="myoddheader">My Green Title</h1>
[/pre]
Not the greatest example but I'm sure you get the point...
Nick
What benefit is there to using <h1 id=...> instead of <h1 class=...>? Or even <h1> over-ridden by a class in the css sheet?
I don't understand why you say you use id more often, I can't see any benefit to the example you have given. What, for example, if you needed to h1 tags on the same page, just for the odd page? How would you do that, now that you have declared h1 will only ever be used once per page?
h1 {
color: #000;
}
body#section h1 {
color: #fff;
}
Like TGecho, I also use id's for my main page sections, i.e. content, nav bar, etc. This way you can style most elements by using decendent selectors, which keeps your markup clean of extra class declarations. It also helps when reading your CSS; because, all your selectors are clearly named.
Id's also come into play when specificity is concerned. A selector including an id will always trump one that only has a class.
Like TGecho, I also use id's for my main page sections, i.e. content, nav bar, etc. This way you can style most elements by using decendent selectors, which keeps your markup clean of extra class declarations. It also helps when reading your CSS; because, all your selectors are clearly named.
Decendant selectors are great. They make your css file much easier to organize and read and they also eleminate the need to have a whole bunch of classes. In one instance I cut the size of one of my css files in half by implementing decendant selectors, just wish I would have been doing this from the start :).
That should be pretty much the other way around. eg there is a class that defines the basic rules for the h1 but you have one special page that needs to be changed. So, you develope an id for it.
That way, all your h1's can be the same but the one with an id in addition to it's class will be different.
Having said that, I agree with all of the above and never use this in practise.
I do however, consider it good practise to give unique elements such as nav columns etc unique identifiers..
Nick
Surely an id should be only ever used where there should only be one of the item on any given page in any circumstances.
I use (for example):
<label for='name'>
Name:
</label>
<input type='text' id='name'>
Which allow the user to click on the word 'Name:' to move the text caret to inside the input box. i.e. there should only ever be one box called name in this situation, two and the browser would not know what to do.
Other than that, there does not seem to be anything to an id tag that class cannot do.
But back to the example mms gave of using id or class in a <p> tag - if there is only ever one paragraph of that style in a document, he/she could use either id or class. But if there could be more than one instance of it in one given page, he/she MUST use class. Right? (P.S. I am relatively new to CSS and this is one subject I looked up but didn't get too far - class worked fine and I used it for almost everything).
If you use the same ID on multiple elements, the results will be unpredictable.
The main advantages of IDs (that come to mind) are that they get priority in the cascade and they can be accessed with javascript. Oh yeah, and it takes three less charecters to apply them than class :)
