Why don't CSS ids work like namespaces?

Question

It would seem natural to me that CSS would support this:

<div id="comment1">
    <div id="helpText">...</div>
</div>

<div id="comment2">
    <div id="helpText">...</div>
</div>

<div id="comment3">
    <div id="helpText">...</div>
</div>

#comment1#helpText
#comment2#helpText
#comment3#helpText

But since CSS ids must be unique, I need to do this:

<div id="comment1">
    <div id="helpText1">...</div>
</div>

<div id="comment2">
    <div id="helpText2">...</div>
</div>

<div id="comment3">
    <div id="helpText3">...</div>
</div>

#comment1#helpText1
#comment2#helpText2
#comment3#helpText3

This seems to be unnecessarily redundant, especially when I have multiple nested DIVs:

<div id="comment1">
    <div id="header1">...</div>
    <div id="introduction1">...</div>
    <div id="helpText1">...</div>
    <div id="footer1">...</div>
</div>

<div id="comment2">
    <div id="header2">...</div>
    <div id="introduction2">...</div>
    <div id="helpText2">...</div>
    <div id="footer2">...</div>
</div>

<div id="comment3">
    <div id="header3">...</div>
    <div id="introduction3">...</div>
    <div id="helpText3">...</div>
    <div id="footer3">...</div>
</div>

Can anyone give me some background as to why this is the case and perhaps some workarounds for getting CSS ids to work more along the lines of a namespace metaphor?

Answer 1

Use classes.

Answer 2

Use class.

An id identifies that element and that element alone. It's like a pointer to an object in C++. Elements without an id are like objects without named (?) pointers to them.

Classes are like attributes. Elements may have zero or more of any combination of classes. They give you what you want.

/* CSS */
#comment1 .header
#comment3 .helpText

<!-- (X)HTML -->
<div id="comment1">
    <div class="header">...</div>
    <div class="introduction">...</div>
    <div class="helpText">...</div>
    <div class="footer">...</div>
</div>

DOM by itself does not have nice selectors for Javascript (and other scripting languages), but toolkits like JQuery allow you to select elements by class name nicely.

Answer 3

In the first example you can use this:

#comment1 .helpText
#comment2 .helpText
#comment3 .helpText

You don't have to define an id for the helpText elements, but a class with class="helpText".

You can also manipulate all children divs by using the following rules:

#comment1 div
#comment2 div
#comment3 div

If you want to manipulate all children of a "comment" node you cnn add class="comment" to these comment divs and access them with

div.comment

Answer 4

What stesch said. Like this:

 <div id="comment1">
    <div class="helpText">...</div>
</div>

<div id="comment2">
    <div class="helpText">...</div>
</div>

<div id="comment3">
    <div class="helpText">...</div>
</div>

and then:

#comment1.helpText
#comment2.helpText
#comment3.helpText

Answer 5

as strager writes: use class.

And remember, an element can belong to several classes at once:

<div id="comment1">
    <div class="header introduction">...</div>
    <div class="introduction">...</div>
    <div class="footer introduction somethingelse">...</div>
</div>

Answer 6

You might actually want to ask the question, "why do we need IDs in CSS at all?" -- if a class can be either unique or non-unique, why do we need another kind of identifier with the necessity to be unique?

My answer would be that we don't actually need them in CSS, but they're needed for other purposes in the DOM. For instance the <label> element can identify which other element it's labelling, using that element's unique ID.

And if they're going to be there in the DOM, we need access to them in CSS.