When you tap on the child element, ignore the parent element

Question

When you tap on the child element, ignore the parent element

Is there a way to make CSS understand that clicking on a child element within the parent should not be considered as clicking on the parent as well? Why not give it a try by clicking on one of the children inside the parent?

  .parent{
    background: blue;
    padding:20px;
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
  .parent:active{
    background: #ddd;
  }
  .child{
    background: red;
    float: left;
    padding: 5px;
    height: 150px;
    width: 150px;
    font-size: 4em;
  }
  .child:nth-child(odd){
    background: pink;
  }

<div class="parent">
  <div class="child">Click me</div>
   <div class="child">Click me</div>
</div>

html css

Answer 1

Answer №1

Provide the parent element

pointer-events: none;

No need for any JavaScript.

Answer 2

Provide the parent element

pointer-events: none;

No need for any JavaScript.

Answer 3

Answer №2

Unfortunately, it is not possible to alter the behavior of the CSS :active pseudo-class using CSS alone.

The :active pseudo-class is mainly used for styling clickable and interactive elements like links and buttons. It can also target elements containing an activated element or form elements being interacted with.

One alternative approach would be to customize the behavior using JavaScript. For instance, you could monitor mouse events on the parent element, check if the click occurs on the parent itself or its children, and apply a specific class accordingly.

const parent = document.querySelector('.parent');

parent.addEventListener('mousedown', function(event) {
  if (event.target === parent) {
    parent.classList.add('active');
  }
});

parent.addEventListener('mouseup', function(event) {
  parent.classList.remove('active');
});

.parent{
    background: blue;
    padding:20px;
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
  .parent.active {
    background: #ddd;
  }
  .child{
    background: red;
    float: left;
    padding: 5px;
    height: 150px;
    width: 150px;
    font-size: 4em;
  }
  .child:nth-child(odd){
    background: pink;
  }

<div class="parent">
  <div class="child">Click me</div>
   <div class="child">Click me</div>
</div>

Answer 4

Unfortunately, it is not possible to alter the behavior of the CSS :active pseudo-class using CSS alone.

The :active pseudo-class is mainly used for styling clickable and interactive elements like links and buttons. It can also target elements containing an activated element or form elements being interacted with.

One alternative approach would be to customize the behavior using JavaScript. For instance, you could monitor mouse events on the parent element, check if the click occurs on the parent itself or its children, and apply a specific class accordingly.

const parent = document.querySelector('.parent');

parent.addEventListener('mousedown', function(event) {
  if (event.target === parent) {
    parent.classList.add('active');
  }
});

parent.addEventListener('mouseup', function(event) {
  parent.classList.remove('active');
});

.parent{
    background: blue;
    padding:20px;
    text-align: center;
    margin: 0 auto;
    height: 300px;
    width: 300px;
  }
  .parent.active {
    background: #ddd;
  }
  .child{
    background: red;
    float: left;
    padding: 5px;
    height: 150px;
    width: 150px;
    font-size: 4em;
  }
  .child:nth-child(odd){
    background: pink;
  }

<div class="parent">
  <div class="child">Click me</div>
   <div class="child">Click me</div>
</div>

Answer 5

Answer №3

To prevent the triggering of the :active state on the parent element using JavaScript, you can utilize the preventDefault method for the mousedown event on the child elements:

document.querySelectorAll('.child').forEach(child =>
  child.addEventListener('mousedown', (event) => {
    event.preventDefault();
  })
);

.parent {
  background: blue;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  height: 300px;
  width: 300px;
}

.parent:active {
  background: #ddd;
}

.child {
  background: red;
  float: left;
  padding: 5px;
  height: 150px;
  width: 150px;
  font-size: 4em;
}

.child:nth-child(odd) {
  background: pink;
}

<div class="parent">
  <div class="child">Click me</div>
  <div class="child">Click me</div>
</div>

Answer 6

To prevent the triggering of the :active state on the parent element using JavaScript, you can utilize the preventDefault method for the mousedown event on the child elements:

document.querySelectorAll('.child').forEach(child =>
  child.addEventListener('mousedown', (event) => {
    event.preventDefault();
  })
);

.parent {
  background: blue;
  padding: 20px;
  text-align: center;
  margin: 0 auto;
  height: 300px;
  width: 300px;
}

.parent:active {
  background: #ddd;
}

.child {
  background: red;
  float: left;
  padding: 5px;
  height: 150px;
  width: 150px;
  font-size: 4em;
}

.child:nth-child(odd) {
  background: pink;
}

<div class="parent">
  <div class="child">Click me</div>
  <div class="child">Click me</div>
</div>

When you tap on the child element, ignore the parent element

Answer №1

Answer №2

Answer №3

Similar questions

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

What could be the reason that the style tag present in this SVG is not impacting any of the elements?

exchange the class using only JavaScript

Unable to retrieve the value of an option element within a select tag using Selenium

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Customizing meter-bar for Mozilla and Safari

What is preventing me from accessing the php page using the AJAX request?

Bootstrap image with simplistic arrow indicators

What is the best way to restrict the number of iterations in ngFor within Angular HTML

What is the process for customizing the image size of a WordPress RSS feed in pixels?

Creating resizable SVG elements using HTML or CSS for dynamic width and height

Tips for resizing the background to match the font size on a canvas marker in Google Maps

In what way can you reach an unfamiliar form within a controller?

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

Issues with $.post function causing HTML to be displayed instead of the intended value

Want to learn how to create a draggable uploaded image on a canvas, similar to the functionality of Google

Different option for positioning elements in CSS besides using the float

Change the position of a Div by clicking on a different Div using JQuery for custom movements

Angular: Transforming input types

Form submissions are not saving checkbox answers