Фильтрация элементов/карточек на веб-странице с помощью CSS-псевдоклассов :has() и :not() [без JS]

Описание: Фильтрацию элементов на веб-странице можно легко реализовать без использования JavaScript, применяя современные возможности CSS.
В видео подробно рассматривается работа двух css-псевдоклассов :has() и :not(), которые в этом помогают.

C помощью css-псевдокласса :has() можно выбирать элементы, содержащие определенный контент.

Например, селектор div:has(img) выбирает все элементы div, которые содержат дочерний элемент img.

Или, например, select:has(option[value="black"]:checked) выбирает элемент select у которого отмечена опция со значением black.

Несколько слов о css-псевдоклассе :not(). Его еще называют отрицательным. Фактически - это функция, принимающая простой селектор в качестве аргумента (например, тег, id, class или атрибут). Она находит элементы, НЕ соответствующие селектору.

p:not(.green){ color: red; }

В данном примере выбираются все абзацы (т.е. теги p), у которых нет класса green и цвет их текста закрашивается красным.

Для реализации фильтрации важна правильная разметка.
Необходимо, чтобы у элементов, которые будут обеспечивать фильтрацию был общий родитель. Поэтому создаем родительский элемент - div, с классом .container.
У него два дочерних элемента: select - собственно фильтр и div с классом .cars - контейнер для карточек, которые должны фильтроваться.

У каждой карточки есть класс (.black, .blue, .yellow), соответствующий одному из значений опций у элемента select.

CSS-правила, которые будут показывать и скрывать карточки в зависимости от выбранной опции в фильтре.

==========================
select:has(option[value="black"]:checked) ~ .cars .card:not(.black){
display: none;
}
==========================

Оно читается следующим образом: если у элемента select имеется опция со значением black и она отмечена (т.е. checked), тогда в div'e с классом cars все карточки у которых нет класса black скрываем. Следовательно показываться будут только черные карточки - что и требуется.

Псевдокласс :checked представляет любой радиокнопку, checkbox или опцию в элементе select, который отмечен или переключен в состояние «включено».

Комбинатор ~ тильда разделяет два селектора в нашем правиле и сопоставляет все экземпляры второго элемента, которые следуют за первым (кстати, не обязательно сразу) и имеют один и тот же родительский элемент.

При выборе опции СИНИЕ должны показываться только синие авто. Для этого копируем уже имеющееся правило и заменяем в нем значение опции и имя класса на blue:

select:has(option[value="blue"]:checked) ~ .cars .card:not(.blue){
display: none;
}

Аналогично поступаем и с опцией для желтых карточек.

Вот собственно и все, что нужно знать для того, чтобы реализовать подобную простую, но эффективную фильтрацию. Теперь она может работать в браузерах даже с отключенным JS.

Полезные ссылки по теме видео:
Пример из этого видео в CodePen
https://codepen.io/inteltone/pen/JjQb...
Псевдо класс :has()
https://developer.mozilla.org/ru/docs...
Псевдо класс :not()
https://developer.mozilla.org/en-US/d...
Комбинатор ~ тильда
https://developer.mozilla.org/en-US/d...
Псевдо класс :checked
https://developer.mozilla.org/ru/docs...

=========================================
🏆 ПРЕДЛАГАЮ УСЛУГИ :::
✅ профессиональная адаптивная кроссбраузерная верстка веб-сайтов (HTML5, CSS3, Flexbox, Grid, Vue 3, Nuxt 3, Vite, Gulp)
✅ анимирование элементов на страницах веб-сайта (GSAP, Adobe Animate)
✅ фронтенд программирование на Javascript
✅ посадка верстки на CMS WordPress

==========================================
⚽ ИНДИВИДУАЛЬНО ОБУЧАЮ ОНЛАЙН :::
✅ кроссбраузерной адаптивной верстке
✅ работе с JS-библиотекой GSAP (веб-анимация)
✅ работе в программе Adobe Animate

Связаться со мной можно по email, который указан на Главной странице этого канала. Перейти можно по ссылке ниже:
https://www.youtube.com/channel/@inte...

💌 СОЦИАЛЬНЫЕ СЕТИ :::
https://vk.com/pro_front_end

#html #css