Id vs. class

Az egyik feladatnál gondom akadt azzal, hogy a javasolt feladatmegoldásban miért class-ok vannak, miért nem id-k.

A magyarázatban, amit kaptam, a macskák mint class és Cirmi és társai mint id szerepeltek. Ebből kiindulva, hogy jobban megértsem a dolgot, lekódoltam a Harry Potter-sorozat három állatát, Bolyhoskát, Agyart és Csámpást, pontosabban az ő néhány jellemzőjüket. A játéknak ez lett az eredménye:

UPDATE (2017. 08.24.): mentori magyarázat után javítom a kódot

<div id=”Fluffy” class=”dog”></div>
<div id=”Fang” class=”dog”></div>
<div id=”Crookshanks” class=”cat”></div>

.dog, .cat {
hair: yes;      <!—azt nem tudom, hogy kódolják az igen-nemet, nekem úgy lenne logikus,  hogy igen 1, nem 0 -->
leg-number: 4;
head: yes;
head-number: 1; <!--update-->
}

#Fluffy {
head-number: 3;
hair-length: short;
color: rgba(50, 25, 10, 1);
}

#Fang {
head-number: 1;  <!--update-->
hair-length: short;
color: rgba(20, 20, 6, 1);
}

#Crookshanks {
head-number: 1; <!--update-->
hair-length: long;
color: rgba(177, 101, 0, 0.9);
}