0xD34F

Никак. Поменяйте инпут и лейбл местами.

UPD. Теперь можно:

.main-footer__box:has(input:focus) label {
  color: red;
}

https://codepen.io/anon/pen/aeoYXY

<table>
  <thead>
    <tr>
      <th v-for="day in nameOfDays">{{ day }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="week in getCalendar">
      <td v-for="day in week" class="day">{{ day }}</td>
    </tr>
  </tbody>
</table>

.day:hover {
  background: red;
  color: white;
}

UPD. Вынесено из комментариев:

как числа которые относятся к прошлому и будущему месяцу сделать серыми а не черными в отличии чисел нынешнего месяца?

<tr v-for="(week, i) in getCalendar">
  <td v-for="day in week" :class="classes(i, day)">{{ day }}</td>
</tr>

methods: {
  classes(week, day) {
    return [
      'day',
      ((!week && day > 7) || (week > 2 && day < 7)) && 'other-month',
    ];
  },
  ...

.other-month {
  ...

При моей структуре достать его через css не получится наверное? (да/нет?)

получится, если разместить input'ы перед label'ами

А о какой части кнопки речь? Там есть три различных элемента.

Окружность, изображающая кнопку:

.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__outer-circle {
  border-color: red;
}

Маркер, обозначающий активную кнопку:

.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__inner-circle {
  background-color: orange;
}

Текст:

.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__label {
  color: blue;
}

https://jsfiddle.net/av0hfgc8/

Задайте отрицательный animation-delay. Или поверните .container через transform: rotate.

3n + 2

погуглил за вас

UPD. Вынесено из комментариев:

Тут сама сложность в том чтоб сделать бордер.

погуглил за вас ещё раз

https://codepen.io/anon/pen/pXEyop?editors=1100

.images_box-model-spec {
  order: 1;
}

.itemsnew-list-item-wrapper {
  order: 2;
}

.button:hover {
  animation: hover 2s linear;
}
@keyframes hover {
  0%, 50% {
    opacity: 0.5;
  },
  100% {
    opactity: 1;
  }
}

https://codepen.io/anon/pen/mZVrxO?editors=1100

:nth-child(4n+3),
:nth-child(4n+4) {
  ...

https://codepen.io/anon/pen/bPbKbE

<input type="range" min="20" max="200" value="100">
<img src="...">

document.querySelector('input').addEventListener('input', function() {
  document.querySelector('img').style.filter = `brightness(${this.value}%)`;
});

https://codepen.io/anon/pen/ZNgoBL?editors=1010

.button {
  color: white;
  background: transparent;
  transition: all 0.4s;
}
.button:hover {
  color: black;
  background: white;
}

https://codepen.io/anon/pen/NVQjMX?editors=1100

.todo-list-item.done  {
 text-decoration: line-through;
};

Точку с запятой внизу видите? Уберите.

this.setState({
    done: true
});

Может, стоит не тупо true назначать, а переключать текущее значение на противоположное?

<span className= {classNames} 
   onClick= {this.onLabelClick} >{ label }
   <button type="button"  onClick= {this.onMarkClick }

Вынесите кнопку за пределы span'а, чтобы клик по ней не запускал обработчик на span'е.

https://jsfiddle.net/cj25ukzd/

.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  padding: 0.2em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  color: #fff;
  background: #0f0;
}
.icon::before {
  content: attr(data-char);
  font-size: 1em;
}

<a class="icon" data-char="¶"></a>
<a class="icon" data-char="X"></a>
<a class="icon" data-char="?"></a>

https://jsfiddle.net/6pzcmqwh/

.v-carousel__prev .v-btn__content,
.v-carousel__next .v-btn__content {
  color: red;
}

UPD. Для vuetify 2 будет так:

.v-window__prev .v-btn__content,
.v-window__next .v-btn__content {
  color: red;
}

$(document).on('click', '.qwe > a', function() {
  $(this).next('.op').addClass('actives');
});

$(document).on('click', '.cl', function() {
  $(this).closest('.op').removeClass('actives');
});

Или может есть вариант на CSS?

есть

.bullet li.notForList:before {
  counter-increment: none;
  content: "";
}

pointer-events: none для ::after

.product_card:hover .hover_block {
  position: relative;
  z-index: 666;
}