body {
  padding: 0;
  margin: 0;
  height: 60px;
  background-color: #ccc;
}

.capo-container {
  display: flex;
  align-content: stretch;
  width: 600px;
}

.capo-head-element {
  content: "";
  width: 100%;
  height: 30px;
  box-sizing: border-box;
}
.capo-head-element.invalid {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 3px,
    rgba(255, 0, 0, 0.3) 3px,
    rgba(255, 0, 0, 0.3) 6px
  );
}
.capo-head-element.invalid:is([data-weight="10"], [data-weight="9"], [data-weight="8"], [data-weight="7"]) {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 3px,
    rgba(0, 0, 0, 0) 3px,
    rgba(0, 0, 0, 0) 6px
  );
}
.capo-head-element.invalid:is([data-weight="2"], [data-weight="1"]) {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 3px,
    rgba(255, 0, 0, 0.3) 3px,
    rgba(255, 0, 0, 0.3) 6px
  );
}
.capo-head-element:hover {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.1);
}
.capo-head-element.invalid:hover {
  box-shadow: inset 0 0 0 9999px rgba(255, 0, 0, 0.1);
}