When clicking on the child don't consider the parent

Question

I want some method to convince CSS that when I click on one of the children inside the parent element don't consider that I clicked also on the parent element. I want you to try 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>

You could do this with javaScript. I don't think you can do it just with css. Would a js solution be acceptable ? — Mihai T, Feb 17 '20 at 14:01
I have no problem, and I think that your reply will be necessary for someone in future. — Kyle Tech, Feb 17 '20 at 14:08
with css you can go only ' down ' the DOM . From parent to child. You cannot go from child to parent. So in your case, you want to access and change the parent when something happens to the child. That's not possible with just CSS — Mihai T, Feb 17 '20 at 14:17
check this answer https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli — Milad Abooali, Feb 17 '20 at 15:35

score 1 · Answer 1 · answered Feb 17 '20 at 15:30

1

Give the parent div

pointer-events: none;

No javascript needed.

answered Feb 17 '20 at 15:30

weebas

11
1

Emiel Zuurbier · Accepted Answer · 2020-02-17T14:15:30.247

No, the CSS :active behavior cannot be changed through CSS.

The :active pseudo-class is commonly used on and elements. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated .

A solution for this would to create your own behavior through JavaScript. When clicking the parent, check if the mouse is on the parent itself or a child inside of it. When it is the parent add a class to the parent element. And remove that class when releasing the mouse.

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>

I have no problem to use Javascript for a solution for this problem, anyway I am using Javascript currently, but is it possible to fix this problem through CSS? I am asking because if someone in the future read my question and he wanted to implement this functionality using only CSS — Kyle Tech, Feb 17 '20 at 14:14

score 0 · Answer 3 · answered Feb 17 '20 at 14:35

Using Javascript, you can simply prevent triggering the :active on the parent, using preventDefault for mousedown event on the children:

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 clicking on the child don't consider the parent

3 Answers3