How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Question

How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Is there a way to apply the cursor-pointer style to an entire div with inline CSS without it affecting just the white space around the child elements? I have tried using position and z-index without success.

I am unable to use an external stylesheet for this.

<div className="cursor-pointer">
  <checkbox>
  <label>
</div>

Are there any alternative methods to achieve this without having to individually apply the cursor-pointer style to each element within the div, especially since there is conditional logic involved?

javascript html css inline

Answer 1

Answer №1

If you are allowing the use of JavaScript, one way to apply the same class to all child elements is by utilizing the querySelectorAll method:

let elements = document.querySelectorAll('.cursor-pointer *');
elements.forEach(element => element.classList.add('cursor-pointer'));

/* This is just for illustration */
.cursor-pointer {
  cursor: not-allowed;
}

<div class="cursor-pointer">
  <input type="checkbox">
  <label>Label</label>
</div>

Answer 2

If you are allowing the use of JavaScript, one way to apply the same class to all child elements is by utilizing the querySelectorAll method:

let elements = document.querySelectorAll('.cursor-pointer *');
elements.forEach(element => element.classList.add('cursor-pointer'));

/* This is just for illustration */
.cursor-pointer {
  cursor: not-allowed;
}

<div class="cursor-pointer">
  <input type="checkbox">
  <label>Label</label>
</div>

Answer 3

Answer №2

This clever JavaScript solution iterates through the parent and children elements to directly apply the cursor style to each one.

let pointers = document.querySelectorAll(".cursor-pointer");

pointers.forEach(function(el) {
  let children = el.querySelectorAll("*");
  children.forEach(function(c) {
    c.style.cursor = "pointer";
  });
  el.style.cursor = "pointer";
});

<div class="cursor-pointer">
  <input type="checkbox">
  <label>A</label>
</div>

Answer 4

This clever JavaScript solution iterates through the parent and children elements to directly apply the cursor style to each one.

let pointers = document.querySelectorAll(".cursor-pointer");

pointers.forEach(function(el) {
  let children = el.querySelectorAll("*");
  children.forEach(function(c) {
    c.style.cursor = "pointer";
  });
  el.style.cursor = "pointer";
});

<div class="cursor-pointer">
  <input type="checkbox">
  <label>A</label>
</div>

How can I create a parent div with cursor-pointer and apply inline styling to make all child elements

Answer №1

Answer №2

Similar questions

Display information on a table using AJAX within the current webpage

How can I dynamically assign ng-model with a filter for a particular object in an array?

Display a unique and unconventional image as a dynamic full-screen background, ensuring the entire image is visible using React/RedwoodJS

Transferring MongoDB information to a Jade template in an ExpressJS application

Checkbox with an indeterminate state in Angular

Developing custom functions in ejs for individual posts

What is the best way to include specific script tags within the <head> and <body> sections when utilizing HtmlWebpackPlugin?

Ways to run evaluations on 'private' functions within an angular service using Karma and Jasmine

The integration of Angular CLI with SCSS is no longer a separate process -

Having trouble with JavaScript function returning false?

Using AngularJS to implement ngView within a custom directive

Submitting a Yii 2 form automatically when it loads

I want to add an LI element to a UL by utilizing jQuery in forms.js

Error handling in angularJS can be quite challenging at times,

Errors in Chartist.js Data Types

Can you provide an explanation for the "ved" parameter used in a Google search?

Instructions for transferring files directly from one website to another

How do I ensure a single row in my table constantly remains at the bottom?

Display an image when the cursor hovers over a text

Tips for wrapping text around an image using Bootstrap 5