While I have come across similar questions, they don't quite address the specific issue I'm facing.
My current project involves creating a keyboard-accessible tree widget. My goal is to apply a background color to the selected list item without affecting its children. Here's what I've attempted so far:
// javascript
$(rootLi).focus(function(event) {
$(this).addClass('focusNode');
});
// css
.focusNode {
background-color: orange;
}
However, this approach results in all children also turning orange. I even tried applying the background color to the span that contains the text for the li, but it ended up highlighting all nested span elements too.
I must admit my CSS skills are not the strongest. Can anyone provide some guidance? Thank you!
Edit
Someone requested to see the HTML code. While I believe my issue is clear, here is the code for reference :)
<div id="treewidget">
<ul role="tree" aria-activedescendant="rootItem" tabindex="0">
<li id="rootItem" tabindex="0" role="treeItem" data-id="1" aria-expanded="true"
aria-labelledby="contentFor1">
<a href="javascript:void(0);" class="expanded"></a> <span id=
"contentFor1">foo</span>
<ul role="group">
<li tabindex="0" role="treeItem" data-id="2" aria-expanded="true"
aria-labelledby="contentFor2"><a href="javascript:void(0);" class=
"expanded"></a><span id="contentFor2">bar</span></li>
<li tabindex="0" role="treeItem" data-id="3" aria-expanded="true"
aria-labelledby="contentFor3"><a href="javascript:void(0);" class=
"expanded"></a><span id="contentFor3">baz</span></li>
</ul>
</li>
</ul>
</div>