Фильтры списка на чистом CSS

Доброго времени суток. Вам, наверное, тоже нравятся СSS3 и трюки, позволяющие не использовать javascript. Но я нигде не встречал фильтрации списка элементов, поэтому хочу рассказать о такой возможности. Допустим, элементы относятся к разным категориям (возможно, как много-ко-много), и нам нужно управлять видимостью элементов тех или иных категорий в списке без использования JS.

По-простому

Допустим, фильтруем элементы по цвету. Для управления списком будут использоваться кнопки, реализуемые парами элементов input и label.

<input type="checkbox" checked name="red" id="red">
<label for="red" class="red"></label>

Чекбоксы имеют состояние, которое в CSS мы можем использовать псевдоклассом :checked. Это как раз то, что нам нужно. При нажатии на label определенного цвета чекбокс будет «выключаться», а элементы этого цвета — пропадать из списка. Элементы незамысловатые:

<div class="red item"><!-- содержимое --></div>

Сама фильтрующая а связь между чекбоксами и элементами списка реализуется с помощью тильда-селектора "~". Для работы этого приема необходимо, чтобы input'ты находились до элементов, причем выше по дереву.

.item{
  display: none;
}
input#red:checked ~ .container .item.red{
 display: block;
 /* прочее */
}

Сам пример (полноценно, хоть и скромно оформленный) можно посмотреть в живую.

Много-ко-много

А что, если элементы могут находятся в нескольких категориях сразу? То есть, если нам нужна фильтрация по тегам? Пускай у нас будут ткани, которые есть в ассортименте в нескольких цветах:

<div class="red blue yellow item">
cotton fabric 
<span class="tag"></span></div>

Оно тоже работает.

Заметим, что фильтр будет работать по принципу логического «ИЛИ». То есть, элемент будет виден, пока активен хотя бы один его тег. Если мы хотим, чтобы он работал как логическое «И», нужно изменить CSS, использовав псевдокласс :not.

input#red:not(:checked) ~ .container .item.red{
 display: none;
}

.item{
  display: block;
 /* другие правила */
}

Работу третьего фильтра можно увидеть здесь.

Очевидно, что область применения такого хака не очень велика… но он прекрасно справляется с демонстрацией мощи тильда-селектора и псевдоклассов, и может, надоумит кого на полезное применение!