input:checked ~ .item

Element Filtering Using input:checked ~ .item

by schrodingers

HTML

<label for="sort">Сортировать по вкусу</label>
<input type="checkbox" id="sort" name="sort" class="input-sort">
<ol class="sort-list">
  <li><a href="#">Мясо</a></li>
  <li><a href="#">Рыба</a></li>
  <li><a href="#">Сметана</a></li>
  <li><a href="#">Молоко</a></li>
  <li><a href="#">Сыр</a></li>
</ol>

CSS

body {
  display: flex;
  flex-flow: column;
  /* justify-content: center; */
  //  align-items: center;
}

li a {
  color: white;
  text-decoration: none;
  padding: 0.5em;
  background: rgb(70, 85, 108);
  display: block;
  height: 2em;
  width: 15em;
  transform: scale(1);
  transform-origin: center;
  transition: all .8s linear;
}

li {
  list-style: ordinal;
}

.sort-list {
  display: flex;
  flex-direction: column;
  font-family: Arial, 'sans-serif';
  font-size: 14pt;
}

.input-sort:checked ~ .sort-list {
  flex-direction: column-reverse;
}