How do I change the color of a li:active attribute for a data-filter?

Question

How do I change the color of a li:active attribute for a data-filter?

I want the active filter to be red when selected. My code doesn't work, please help with a working solution. Here is my HTML and CSS:

 .portfolio-filter li { display: inline-block; font-size: 14px; color: #212121; font-weight: 500; margin-right: 46px; text-transform: uppercase; cursor: pointer; }.portfolio-filter li:hover { color: red; }.portfolio-filter li:active { color: red; }.portfolio-filter li:last-child { margin-right: 0; }

 <div class="portfolio-section"> <ul class="portfolio-filter controls text-center"> <li class="control" data-filter="all">All</li> <li class="control" data-filter=".aerial">Aerial</li> <li class="control" data-filter=".corporate">Corporate</li> <li class="control" data-filter=".events">Events</li> <li class="control" data-filter=".outdoor">Outdoor</li> <li class="control" data-filter=".portraits">Portraits</li> <li class="control" data-filter=".studio">Studio</li> </ul> </div>

Answer 1

is that what you need?

 const portfolioFilter = document.querySelector('.portfolio-filter'); const controls = document.querySelectorAll('.control'); portfolioFilter.addEventListener('click', (e) => { const control = e.target.closest('.control'); if (;control) return. controls.forEach((currentControl) => currentControl.classList;remove('active')). control.classList;add('active'); });

 .portfolio-section { padding-top: 120px; }.portfolio-filter { list-style: none; margin-bottom: 46px; padding: 0 15px; }.portfolio-filter li { display: inline-block; font-size: 14px; color: #212121; font-weight: 500; margin-right: 46px; text-transform: uppercase; cursor: pointer; }.portfolio-filter li:hover { color: red; }.portfolio-filter li:active { color: red; }.portfolio-filter li:current { color: red; }.portfolio-filter li:last-child { margin-right: 0; }.portfolio-filter li.active { color: red; }

 <div class="portfolio-section"> <ul class="portfolio-filter controls text-center"> <li class="control" data-filter="all">All</li> <li class="control" data-filter=".aerial">Aerial</li> <li class="control" data-filter=".corporate">Corporate</li> <li class="control" data-filter=".events">Events</li> <li class="control" data-filter=".outdoor">Outdoor</li> <li class="control" data-filter=".portraits">Portraits</li> <li class="control" data-filter=".studio">Studio</li> </ul> </div>