Emphasize the selected item using the same style as the one that was dragged or clicked

Question

Emphasize the selected item using the same style as the one that was dragged or clicked

Imagine a scenario where there are numerous items, each labeled with a specific class. There may be multiple items sharing the same class.

If a user clicks or drags an item, I want all other items with the same class to be highlighted as well.

I am looking for a more sophisticated approach rather than simply using JavaScript to loop through all items and apply the "highlighted" class to matching items.

Is there a way to achieve this without needing to manually define or generate CSS for each class?

html css

Answer 1

Answer №1

This code snippet provides a solution that dynamically injects styles based on the selected class. By utilizing a CSS attribute selector and child selector, it is able to apply highlighting to the elements.

const divs = document.querySelectorAll(".outer > div");

Array.from(divs).forEach((element, index) => {
  element.addEventListener("click", (e) => {
    e.stopPropagation()
    const selectedClass = element.className;
    document.querySelector(".outer").dataset.selected = selectedClass;
    document.body.appendChild(Object.assign(document.createElement("style"), {
      textContent: `[data-selected=${selectedClass}] .${selectedClass} {background-color: yellow}`
    }));
  });
});

.outer > div { cursor: pointer; }

<div class="outer">
  <div class="apples">apples</div>
  <div class="birds">birds</div>
  <div>No class</div>
  <div class="apples">apples</div>
  <div class="birds">birds</div>
  <div class="pines">pines</div>
  <div class="pines">pines</div>
  <div class="birds">birds</div>
</div>

Answer 2

This code snippet provides a solution that dynamically injects styles based on the selected class. By utilizing a CSS attribute selector and child selector, it is able to apply highlighting to the elements.

const divs = document.querySelectorAll(".outer > div");

Array.from(divs).forEach((element, index) => {
  element.addEventListener("click", (e) => {
    e.stopPropagation()
    const selectedClass = element.className;
    document.querySelector(".outer").dataset.selected = selectedClass;
    document.body.appendChild(Object.assign(document.createElement("style"), {
      textContent: `[data-selected=${selectedClass}] .${selectedClass} {background-color: yellow}`
    }));
  });
});

.outer > div { cursor: pointer; }

<div class="outer">
  <div class="apples">apples</div>
  <div class="birds">birds</div>
  <div>No class</div>
  <div class="apples">apples</div>
  <div class="birds">birds</div>
  <div class="pines">pines</div>
  <div class="pines">pines</div>
  <div class="birds">birds</div>
</div>

Answer 3

Answer №2

It may not be possible to achieve the exact functionality as described, but you can utilize :focus-within to achieve something similar:

.main:focus-within .a {  
  background: red;
}

.a,
.b {
  width: 100px;
  height: 100px;
}

.a {
  background: yellow;
}

.b {
  background: blue;
}

<div class="main">
  <button class="a"></button>
  <button class="b"></button>
  <button class="a"></button>
  <button class="b"></button>
  <button class="a"></button>
  <button class="b"></button>
</div>

One drawback is that when focusing on a .b element, .a elements will also have a red background. Additionally, this method requires using focusable elements.

Answer 4

It may not be possible to achieve the exact functionality as described, but you can utilize :focus-within to achieve something similar:

.main:focus-within .a {  
  background: red;
}

.a,
.b {
  width: 100px;
  height: 100px;
}

.a {
  background: yellow;
}

.b {
  background: blue;
}

<div class="main">
  <button class="a"></button>
  <button class="b"></button>
  <button class="a"></button>
  <button class="b"></button>
  <button class="a"></button>
  <button class="b"></button>
</div>

One drawback is that when focusing on a .b element, .a elements will also have a red background. Additionally, this method requires using focusable elements.

Emphasize the selected item using the same style as the one that was dragged or clicked

Answer №1

Answer №2

Similar questions

The Art of Unraveling a String in SQL Server

Why does my PHP script execute before receiving any input?

Scoped Styles rarely stand a chance against more dominant styles

The menu seems to be off-center

What is the best way to update the text of an <a> element when it is clicked

Tips for disabling default browser input validation in React

What could be preventing my PHP function from being executed when the button is clicked?

``There is a need to modify the content within various if

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

Discovering the initial word of a string using jQuery

Allowing users to navigate through a fixed content page using a scrolling menu, all without the need

What is the best way to align isotope and organize its components?

Submitting data through AJAX when clicking a button

Is there a different option to use instead of embedding two forms?

Having trouble with my PHP index not properly redirecting to the dashboard file after logging in

How come this bootstrap text starts overlapping the image when I resize the screen?

What are some ways to add border styles to the Material UI TableRow Component?

Highlight the menu when the user is actively browsing this section

Retrieving script data from a webpage

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update