Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

Question

Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

<style>
#a, #b, #c {
  height: 100px;
  width: 100px;
  background-color:red;
  font-size: 100px;
  margin-bottom: 20px;
}

#a:active, #b:active, #c:active {
  background-color: blue;
}
</style>

Upon clicking on individual elements like #a, #b, or #c, only the respective element changes color. However, a requirement emerged to make all elements change color simultaneously upon clicking any of them.

If this capability necessitates JavaScript, please provide a solution using vanilla JS.

javascript html css

Answer 1

Answer №1

Forget about relying on JavaScript or JQuery for this task. All you need is CSS.

Let me show you how it's done.

First, group all elements under a parent element and assign the same class to each child element.

<div id="main">
    <div id="a" class="abc">A</div>
    <div id="b" class="abc">B</div>
    <div id="c" class="abc">C</div>
</div>

Utilize the :has() pseudo selector to determine if any child element is active, then apply styles to all children if one is active.

#main:has(.abc:active) > .abc {
    background-color: blue;
}

I hope this explanation is useful to you!

Answer 2

Forget about relying on JavaScript or JQuery for this task. All you need is CSS.

Let me show you how it's done.

First, group all elements under a parent element and assign the same class to each child element.

<div id="main">
    <div id="a" class="abc">A</div>
    <div id="b" class="abc">B</div>
    <div id="c" class="abc">C</div>
</div>

Utilize the :has() pseudo selector to determine if any child element is active, then apply styles to all children if one is active.

#main:has(.abc:active) > .abc {
    background-color: blue;
}

I hope this explanation is useful to you!

Answer 3

Answer №2

If you want to achieve this functionality, JavaScript (or jQuery) is necessary. Here's a clever method using event listeners.

When one element is clicked, the code below will add a class to all elements and then remove it when the click is released.

var elements = document.querySelectorAll('#a, #b, #c');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mousedown', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.add('active');
    }
  });

  elements[i].addEventListener('mouseup', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.remove('active');
    }
  });

  elements[i].addEventListener('mouseleave', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.remove('active');
    }
  });
}

.active {
  background-color: blue !important;
}

#a, #b, #c {
  height: 100px;
  width: 100px;
  background-color:red;
  font-size: 100px;
  margin-bottom: 20px;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

Answer 4

If you want to achieve this functionality, JavaScript (or jQuery) is necessary. Here's a clever method using event listeners.

When one element is clicked, the code below will add a class to all elements and then remove it when the click is released.

var elements = document.querySelectorAll('#a, #b, #c');

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mousedown', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.add('active');
    }
  });

  elements[i].addEventListener('mouseup', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.remove('active');
    }
  });

  elements[i].addEventListener('mouseleave', function() {
    for (var j = 0; j < elements.length; j++) {
      elements[j].classList.remove('active');
    }
  });
}

.active {
  background-color: blue !important;
}

#a, #b, #c {
  height: 100px;
  width: 100px;
  background-color:red;
  font-size: 100px;
  margin-bottom: 20px;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

Is there a way to simultaneously apply the :active pseudoclass to multiple elements?

Answer №1

Answer №2

Similar questions

Changing the appearance of a shadow root element using CSS styling

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

FancyBox - Is there a "Never show this message again" option available?

Using jquery, transform json data into html table format

Load Bootstrap 4 Modal with Ajax

Unable to bring in Vue component from NPM module

Retrieve input value in Angular 8 using only the element's ID

Having trouble with your HTML iFrame not functioning properly?

Javascript continues to conceal my web background without my permission

CSS for leaving white space at the end of one third of a container

Guide for manually initiating the mouseleave event on a smartphone or tablet

After attempting to follow a guide, I encountered a scenario where a view was returning None because the is_ajax function was not

Having issues with transferring user input on change to a parent component in React JavaScript

Scrolling behavior in two columns with sticky positioning

Utilizing jQuery show() and hide() methods for form validation

Experiencing difficulty with implementing an Angular filter to search through a list

Performing the task of removing a complete script using D3 or JavaScript

Converting units to rem dynamically in CSS: a comprehensive guide

Exploring the benefits of utilizing useState and localStorage in Next.js with server-side

Customized Box with MaterialUI Styling