-1

I would like to select the hour-hand, min-hand and second-hand parts of the 'hand' class. I am trying to enter in .hand hour-hand into CSS but it doesn't select it.

Essentially I want to make the second-hand red instead of black, but right now the only class in CSS is the following:

.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
  transition-timing-function: ease-in-out;
}
<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

Can I create a separate class for the second hand in this case?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
y05cahillj
  • 1
  • 1
  • `.hand.hour-hand` (with no space), but `.hour-hand` or `.second-hand` should be sufficient so long as the definition is placed _after_ that of `.hand`. – BenM Jul 27 '22 at 09:21

1 Answers1

1

Yes, you only need .second-hand to do so. You can have many classes on one element. In this case, .hand is the base for all, and the other classes become modifiers.

.hand.second-hand would also work but is unnecessary in this case.

H.W. Sanden
  • 153
  • 7