Как по клику изменить текст, используя css?

#css #css3 #sass #less

Получил интересное задание, но уже сломал голову, как его выполнить, без js. Звучит
оно так - 

"Дан фрагмент html, для которого нужо написать стили css, допускается less или sass.
Результат должен быть как на картинке. Круг, а внутри цифра 4. При клике цифра должна
уменшаться на-1. Если кликнуть по кружку когда в нём находится цифра 1, то цифра сбрасывается
до 4 - необходимо описать такой внешний вид и поведение, используя только стили. html-менять
нельзя, применять другие языки тоже нельзя.

http://prntscr.com/okb9zt ссылка на пример"

html 


    
    
    
    4



css, который я для этого уже написал

  .radius{
      position: absolute;
      padding: 20px;
      margin: 5px;
      border: 3px solid black;
      border-radius: 50px;
   }
   .num{
      position: relative;
      top: 19px;
      left: 24px;
   }

    

Ответы

Ответ 1

Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в
реальном коде не надо так!))

Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку
лейбела, и добавить еще три before-after, но так показалось нагляднее.



.num::before { content: "4"; }
.radius::before { content: "3"; }
.num::after { content: "2"; }
.radius::after { content: "1"; }

#check1:not(:checked) + #check2:not(:checked) ~ .num         { display: block;}
#check1:not(:checked) + #check2:not(:checked) ~ .num::before { display: block;}

#check1:not(:checked) + #check2:checked ~ .radius         { display: block;}
#check1:not(:checked) + #check2:checked ~ .radius::before { display: block;}

#check1:checked + #check2:checked ~ .num        { display: block;}
#check1:checked + #check2:checked ~ .num::after { display: block;}

#check1:checked + #check2:not(:checked) ~ .radius        { display: block;}
#check1:checked + #check2:not(:checked) ~ .radius::after { display: block;}

/* Ага, можно оставить один { display: block }, а все селекторы разделить запятыми. */

label {
  display: none;
  position: relative; /* Чтобы абсолютные before и after не выходили за рамки элемента */
  color: transparent; /* текст самого лейбела - прозрачный, чтобы не заморачиваться */
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 20px;
  font-family: "Helvetica";
  cursor: pointer;
  user-select: none;
}

.num::before,
.num::after,
.radius::before,
.radius::after {
  display: none;
  position: absolute;
  color: black;
  top: 5px;
  width: 100%;
  text-align: center;
}

  
  
  
  4





P.s. А возможных комбинаций n! ))) Будет 3 чекбокса - можно сделать 6 "переключений".
4 штуки = 24, 5 штук - уже 120 !)


Ответ 2

Хоть и не в тему, но вот подобное на z-index, без javascript:

Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.

Новый, улучшенный вариант:



button:focus + button {z-index: 4}

button:nth-child(1) {z-index: 3}
button:nth-child(2) {z-index: 2}
button:nth-child(3) {z-index: 1}

button {
  background: radial-gradient(#fff 57%,#000 61%,#000 67%,#fff 71%);
  padding: 0 12px;
  position: absolute;
  font-size: 40px;
  outline: none;
  border: none;
}