Currently, I am going through a web development project on YouTube where I am constructing a JavaScript clock. It seems that by creating a container and a child element, I can use absolute and relative positioning.
However, one thing that confuses me is why .clock is included in every line of CSS. For instance, instead of .clock .number1, why can't it just be .number1? Does specifying the parent or container element have a specific purpose?
.clock {
background-color: red;
width: 500px;
height: 500px;
border-radius: 50%;
border: 2px solid black;
position: relative;
}
.clock .number {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.clock .number1 {
transform: rotate(30deg);
}
.clock .number2 {
transform: rotate(60deg);
}
.clock .number3 {
transform: rotate(90deg);
}
.clock .number4 {
transform: rotate(120deg);
}
.clock .number5 {
transform: rotate(150deg);
}
.clock .number6 {
transform: rotate(180deg);
}
.clock .number7 {
transform: rotate(210deg);
}
.clock .number8 {
transform: rotate(240deg);
}
.clock .number9 {
transform: rotate(270deg);
}
.clock .number10 {
transform: rotate(300deg);
}
.clock .number11 {
transform: rotate(330deg);
}
.hand .hour {
width: 20px;
height: 20px;
position: relative;
top: 20px;
left: 5px;
}<div class="clock">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
<div class="number number1">1</div>
<div class="number number2">2</div>
<div class="number number3">3</div>
<div class="number number4">4</div>
<div class="number number5">5</div>
<div class="number number6">6</div>
<div class="number number7">7</div>
<div class="number number8">8</div>
<div class="number number9">9</div>
<div class="number number10">10</div>
<div class="number number11">11</div>
<div class="number number12">12</div>
</div>