What is the difference between using classes or IDs? Seems like both operate in a similar way.
DIV’s are HTML elements that contain other elements. Classes are not elements, as such, but special labels attached to elements to help distinguish them as a ‘class of elements’ that can be targeted by CSS or script.
A class can apply to any elements, not just <div>.
1 Like
Hello,
I meant to compare IDs with classes. Rushed my post because dinner was ready.
That is easy to understand. Kind of figured you might be asking that but didn’t want to presume or grill you.
ID’s are very limited. Not in importance or specificity, but in how they are applied.
Eg.
<div class="foo">
<div class="foo">
<h1 class="foo"></h1>
<p class="foo"></p>
</div>
<div>
Is acceptable, though not very likely. Acceptable, just the same.
<div id="foo">
<div id="foo">
<h1 id="foo"></h1>
<p id="foo"></p>
</div>
<div>
Is not acceptable. A validator will raise a flag on three of the lines… duplicate id.
The correct way to write the above…
<div id="foo">
<div>
<h1></h1>
<p></p>
</div>
<div>
That is one difference. I’ll edit this post with a couple others so watch for changes.
In your 3rd code box, is the id=“foo” applied to all elements within the main DIV?
As the parent element, the children will inherit anything that is inheritable.
p { color: #888; }
#foo { color: #666; }
The color property will be inherited by the child P, so that one will have #666 for color. There are a lot of properties that are not inherited from parents, but that will take some research and reading on that very subject. Something to whittle away at over time, but make sure to do it.
Classes have the same reach. If the parent is class foo, instead of id foo,
.foo { color: #666; }
will also apply in the very same way–by inheritence.
The biggest difference between class and id is specificity, which is a measure or importance. Loosely described,
0 0 0 0
Think of specificity as a collated number. The column the number falls in describes its importance, or weight. Any value greater than zero in a column to the left of another column will trump it.
0 1 0 0
0 0 11 0
Column three (from the right) wins out over column 2. The winner in this case is ID. Column 2 is Class.
That is one of the reasons to use ID, but not the only one. Semantics is the other. ID’s let us identify key page elements for the reader of our source code, for scripts and for the style sheet. Given that they are unique we know that when we select the header we get the whole element node and its children.
document.getElementById('header')
This is a JavaScript (pre-ES5) selector that builds a collection with one node by design. The node list has one parent node, but the collection contains several, all its children are included along with the parent node.
CSS id selects by the same mechanism.
The key design approach is traversal of the DOM tree, and thus node lists. ID lets us make a snapshot of a key fragment of the page and create a sort of mini DOM tree… A single root (ID) and a tree growing out of it.
Where the specificity comes in is when there are elements with shared properties sprinkled throughout the page. Say there is a class of heading throughout the document, and one of them just happens to be nested with ID parentage.
.bar { text-transform: capitalize; }
The above is a practical way to be sure that all headings are capitalized Give them all a class of bar. It goes further than that, of course, but it describes how a class of heading can appear in any part of the page, An ID heading can only appear once. Personally, I would never give an outline element an id. Stick to class for headings and other elements. Give the ID to the parent.
Given this class of headings that we have interspersed throughout the page, an ID parent can override that…
#foo .bar { text-transform: uppercase; }
We can also do this with a class, as in the case earlier, but to a reader, this is bang on what they can quickly recognize and understand in both source code and CSS. It’s meaningful, which leans to semantic.
<h1 class="bar"></h1>
<div id="foo">
<div>
<h1 class="bar"></h1>
<p></p>
</div>
<div>
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.