There is a written (several times) rule that sais that an #id selector identifies an unique element into a DOM tree.
This is always followed by the conclusion that only one alone element with this #id can exist into the DOM tree.
So if you need to use a CSS selector for a kind of element that has another occurrences into the DOM tree you have to use a .class selector.
Well, I have serios doubts about this constriction also I think is not responding to a real need and avoiding a more intuitive use of the #id and .class selectors.
The question:
Existing the chain selectors like '#id1 #id2' I could understand that #id2 better to be unique into the #id1 context, but which is the meaning of forcing that #id2 should be unique into the whole DOM context?
This rule is just fueling a degenerative hell of id nonsense-naming. Also forcing us to over use the class attribute.
I feel more confortable avoiding this rule and building structures like this, (please understand that the code is simplified and not using concrete HTML structures in propose):
<div id="armys" class="list">
<div id="1" class="element">
<div id="orders" class="text">My orders</div>
<div id="soldiers" class="list">
<div id="1" class="element">
<div id="name" class="text">John</div>
</div>
<div id="2" class="element">
<div id="name" class="text">Esther</div>
</div>
</div>
<div>
<div id="2" class="element">
<div id="orders" class="text">My orders</div>
<div id="soldiers" class="list">
<div id="3" class="element">
<div id="name" class="text">Smith</div>
</div>
</div>
<div>
</div>
Which is a very much natural translation of an structure like this:
armys: [
{
id: 1,
orders: "My orders",
soldiers: [
{
id: 1,
name: "John"
},
{
id: 2,
name: "Esther"
}
]
},
{
id: 2,
orders: "My orders",
soldiers: [
{
id: 3,
name: "Smith"
}
]
}
]
