Adding focus state to container with embedded link - html

Question

I have an Angular ng-repeat that creates boxes and returns a container with a little info. I have the hover effect working, but am struggling getting the focus to work. Basically, these containers are allowed to be clicked, then show a larger box with additional info. Showing my code below. Ideas please?
html:
<h1>Pending Swipes</h1>
<div class="swipeBoxes" ng-repeat="swipe in swipes" ng-required="true">
<a href="" ng-click="editSwipe(swipe)" >
<div class="swipeBox col-md-12">
<div class="col-md-12 claimObject">
<span class="claimLine" style="width: 3px; position: absolute; top: 5px; left: 5px;">{{ $index + 1 }}.</span>
<span class="claimedLeft">swipe date:</span>
<span class="claimedRight">{{ swipe.date | date: 'MM/dd/yyyy'}}</span>
</div>
<div class="col-md-12 claimObject">
<span class="claimedLeft">provider:</span
><span class="claimedRight">{{ swipe.merchant }}</span>
</div>
<div class="col-md-12 claimObject">
<span class="claimedLeft">amount:</span>
<span class="claimedRight">{{ swipe.amount | currency }}</span>
</div>
</div>
</a>
</div>
And the css is to make this work kinda:
.swipeBoxes a {
text-decoration: none;
}
.swipeBoxes a:hover {
text-decoration: none;
}
.swipeBox, .recurBox {
background-color: #ffffff;
margin-top: 10px;
min-height: 85px;
box-shadow: 0 0 8px rgba(0,0,0,.5);
border-radius: 2px;
color: #000000;
}
.swipeBox:hover, .swipeBox:active, .swipeBox:focus {
background-color: #efefef;
}
.swipeBox >a:active, .swipeBox >a:focus {
background-color: #efefef;
}

Answer 1

The :focus selector is only allowed on elements that accept keyboard events or other user inputs.
So it will work on a elements but not on div.
Your css rule:
.swipeBox >a:active, .swipeBox >a:focus {
background-color: #efefef;
}
is not working because you have no a element as first child of .swipeBox