Prevent event propagation when a CSS pseudo-element is active

In my project, there are two elements: .parentElement and .childElement. Both have the :active implemented to appear darker when pressed. The .childElement is nested inside the .parentElement.

I am looking for a way to prevent the .parentElement:active from being triggered when the .childElement:active is triggered.

In JavaScript, this can be achieved by using .stopPropagation(). Is there an equivalent method in CSS to accomplish this?

In my current project, every heading is clickable, including the sub-headings. This essentially creates a button within a button scenario. When a user clicks on a heading, the page scrolls to the corresponding section. https://i.sstatic.net/hxn09.png

htmlcsspseudo-class

Answer №1

I see your point, in CSS the parent element becomes active when the child is active - unfortunately, there doesn't seem to be a way to stop the click event from "bubbling" up. One workaround could be to create the illusion of nesting by using styled sibling elements like this:

<style>
    .parentContainer {background-color:#99ff99;padding:8px;}
    .childBox {background-color:#ff9999;border:solid 8px #99ff99;border-top-width:0;padding:8px;}

    .parentContainer:active {background-color:#33ff33;}
    .parentContainer:active ~ .childBox {border-color:#33ff33;}
    .childBox:active {background-color:#9933ff;}
</style>

<div class="parentContainer">Parent</div>
<div class="childBox">First child</div>
<div class="childBox">Second child</div>
<div class="childBox">Third child</div>

I hope this suggestion proves useful :-)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble displaying DIV Content with CSS through printing

<script type="text/javascript"> function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'mydiv', 'height=550,width=750'); mywindow.doc ...

javascriptjqueryhtmlcssprinting

Adjust the appearance of a glyphicon by modifying its color according to various criteria

Using angularjs, I implemented ng-repeat to display details in a table. In the final column, I aim to display the glyphicon 'glyphicon glyphicon-stop' in a specific color. <tr ng-repeat="ps in $ctrl.personLst"> <td>{{ ps.id}}</td& ...

cssangularjs

Could there be a glitch affecting the alignment of the dropdown-menu-end in Bootstrap 5.0?

I can't seem to make dropdown-menu-end from Bootstrap 5.0 work in Angular, even though I copied the exact code from https://www.w3schools.com/bootstrap5/bootstrap_dropdowns.php. The HTML display using my code from VSC looks like this: site appearance ...

htmlbootstrap-5

Pictures piling up vertically instead of lining up horizontally

Is there a way to display these images in one row horizontally instead of on separate lines? The text under the images is causing them to wrap because of the width. How can I ensure that the title text has the same width as the image? <img src="image.p ...

html

Ways to gradually reveal all elements within a header section

Is there a way to gradually reveal all the components in my header once the window has finished loading by utilizing jQuery's fadeIn function? Below is the pertinent code snippet: HTML <div class="banner"> <header class="header"> < ...

javascriptjqueryhtmlcss

Exploring Angular 6's nested routes and corresponding components for child navigation

I'm currently diving into the concept of lazy loading in Angular 6. Here's a visual representation of the structure of my application: ─src ├───app │ ├───components │ │ ├───about │ │ ├─── ...

javascriptangularhtmltypescriptbootstrap-4

Spartacus 3.3 - Unleashing the Full Potential of the Default Sparta Storefront Theme

Looking for advice on how to customize the default Spartacus Storefront theme (Sparta) by only overriding specific CSS vars. Any suggestions? I tried following the instructions provided at: https://github.com/SAP/spartacus/blob/develop/projects/storefront ...

cssspartacus-storefront

Display the code exactly as it appears

Important Note: I have to insert the following code three times in the HTML body of a static webpage. Instead of repeating it multiple times and cluttering the code, I prefer to have a single line (repeated three times) that calls the function to output th ...

phphtmlescaping

"Implement a feature in JavaScript that allows users to click on images to navigate

I have a navigation feature on my website that allows me to cycle through images using the following code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num' ...

javascriptcssimagehyperlinkclickable

Is there a way to convert an HTML string into an HTML DOM without the need for scripts or images to

Upon receiving an HTML document as a string from the server via an Ajax call, I now need to modify certain parts of it and send it back to the server. This involves altering attributes and values (such as style="", src="", href="") and changing innerHTML e ...

jqueryhtmlxmlparsingdom

IE rendering issue: jQuery image slideshow captions lack transparency

I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...

jquerycssinternet-explorerslideshowopacity

Disabling the button add-ons functionality in Bootstrap 3 for mobile devices

I am facing a challenge with my website that has a visually appealing jumbotron and an enticing email signup call to action bar. The issue arises from the fact that my site is bilingual, catering to both German and English speakers, causing confusion with ...

htmlresponsive-designtwitter-bootstrap-3

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

I have successfully implemented overflow-y: scroll; to keep the scrollbar space always reserved and prevent content from shifting when the scrollbar appears. However, I noticed that when I click on a select element, this scrollbar space is lost. How can I ...

cssreactjssassmaterial-uireact-hooks

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...

cssangularcss-selectors

matching patterns within HTML div elements

Within my Notepad++ text editor, I am attempting to remove all spaces within a div tag except for those between the comma and the last name. This is what the input looks like: <div class="n"> Joe , Williams </div> And this is the desire ...

htmlregexnotepad++

Unable to grab hold of specific child element within parent DOM element

Important Note: Due to the complexity of the issue, the code has been abstracted for better readability Consider a parent component structure like this: <child-component></child-component> <button (click)="doSomeClick()"> Do Some Click ...

javascripthtmlangulartypescript

Vertical Image Alignment in Bootstrap 3

Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column. <div class="containe ...

htmlcsstwitter-bootstrap

Is it Possible to Ajaxify a Forum Using a Bookmarklet?

My coding knowledge is limited to HTML. However, I am curious about the possibility of creating a bookmarklet that could ajaxify a forum, automatically refreshing and adding new posts to the page. Is such a thing possible? It's frustrating having to ...

htmlajax

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

cssresponsive-designmedia-queries

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

cssreactjscss-tables