Clickable Parent SCSS Snippet

This code snippet allows you to make an entire parent element clickable using a link from one of its children.

Information

This SCSS snippet not only makes the parent item clickable via the child elements link but also removes the focus from the child element and moves it to the parent.

Steps Needed:

Update below // MAKE SURE THIS STYLING MATCHES YOUR WEBSITE to your focus outline style
Apply the @include to the parent element and replace the argument $child-element with your child elements css selector.

Example:

.card {

@include clickable–parent(‘.child-element’);

}

@mixin clickable--parent($child-element) {
    position: relative;
    
    // add focus ring to parent element and remove from child.
    &:has(:focus-visible) {
    	// MAKE SURE THIS STYLING MATCHES YOUR WEBSITE
        outline-style: solid;
        outline-color: var(--action);
        outline-width: 0.2rem;
        outline-offset: 0.25em;

        #{$child-element}:not(a) > a {
            outline: none !important;
        }

        a#{$child-element} {
            outline: none !important;
        }

    }
	//child styling
    #{$child-element}:not(a) > a {

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer !important;
            display: flex;
        }
    }

    a#{$child-element} {

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            cursor: pointer !important;
            display: flex;
        }
    }
}