Question

I have a list item that contains a link inside. I’ve styled the list item be a link itself and has css properties :active enabled to make it appear to be clicked. However, I would like that to not happen when I’m clicking the link inside it as to not be confusing where the user is actually ending up.

before I changed anything:

.store-list-item:active {
    -webkit-box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.6);
    box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.6);
}

after trying with guards:

.store-list-item:active when not (.store-list-item .make-default:active) {
    -webkit-box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.6);
    box-shadow: inset 2px 2px 2px 2px rgba(0, 0, 0, 0.6);
}

Is this possible? If not, any workarounds?

EDIT: I Added a jsfiddle of what’s exactly happening.
http://jsfiddle.net/cV8ep/1/

Answer 1

Workaround

If you apply your styling that is currently on the li instead to a new wrapper div that will be inside that li, a wrapper which contains all but the “Make Default” button, then apply a position: relative on the li and a position: absolute on the button to position it back over the wrapper in about the same place, this will disassociate the button from being in the wrapper that gets the :active state (which is now that new wrapper div, not the li). This will prevent the activation of the effect on the click of the button.

See this fiddle (which has a few “hacky” points to it, like I just overrode the .pull-right class for the sake of illustration; you would want to be a bit more elegant about the actual construction of the code).