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

What could be causing my Styled Components not to display the :before and :after pseudo elements?

Expanding space underneath for inline-block elements

Avoiding the appearance of a scrollbar when content extends beyond its containing block

Is it possible to determine the search query if the search term appears within the website URL?

Creating a customizable range input for pixel values: a step-by-step guide

Guidelines for refreshing owl carousel on ng-click using AngularJS

When using CSS3 flex, the input box has a specified width but is still overflowing

Is it possible to modify the default behavior of a sensitive region within a button?

Once you address a block using jQuery

Properly arrange the positioning of floating HTML elements

How to resolve the issue of a sticky header not functioning properly with a resizable column in Primeng

Problem encountered in Firefox using Selenium: Invalid expression SyntaxError when dealing with Div tags in XPath

JavaScript Comparison of Numerical String Syntax

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

The substance (singular word) extends beyond the margins of the mobile screen

Having trouble implementing HTML font-family in C# code due to spaces

What to do when IE6/IE7 margins disappear after moving a relatively positioned floated div using jQuery's .hover()?

Locate a URL within a Java string and generate an HTML hyperlink tag

The importance of color value is underscored

Media query failing to adjust properly