Give the parent div
pointer-events: none;
No javascript needed.
Solution 1 :
Solution 2 :
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>Solution 3 :
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>Problem :
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>Comments
Comment posted by Mihai T
You could do this with javaScript. I don’t think you can do it just with css. Would a js solution be acceptable ?
Comment posted by Kyle Tech
I have no problem, and I think that your reply will be necessary for someone in future.
Comment posted by Mihai T
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
Comment posted by stackoverflow.com/questions/1369035/…
check this answer
Comment posted by Kyle Tech
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
Comment posted by Emiel Zuurbier
Unfortunately, no.