0

I am performing some :focus changes when a user tabs through a site, and am trying to add an outline of 2px solid #F3692B; to the parent li, when the <a> tag is focused when the user tabs through the site.

This is the HTML:

<li class="panel activePage" style="width: 1038px; height: 340px;">
    <a href="/about" class="" style="width: 100%; height: 100%;">
        <img src="/sites/distribution.jpg" alt="Digital" class="active">
    </a>
</li>

I know there is CSS to change the properties of a containing div and adjacent div, but I have not been able to find any way to change the CSS of a parent div.

Keep in mind I do NOT want to use jQuery for this!

Any suggestions?

Ian Ryan Clarke
  • 258
  • 1
  • 8
  • 3
    **...not been able to find any way to change the CSS of a parent** because you have been finding something which does not exist. There is no way to select parent in CSS (at this time). – King King Apr 24 '14 at 17:52
  • possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) –  Apr 24 '14 at 17:52
  • Ah ok, thanks @KingKing I was unsure if I was not looking properly or if it did not exist – Ian Ryan Clarke Apr 24 '14 at 17:53
  • There are currently no parent selectors. Only child and sibling selectors. Do you have a use case that can better describe what you're trying to accomplish? – seangates Apr 24 '14 at 17:53
  • well if you want to select a parent on focus, you will have to use script. if not jQuery, then plain-vanilla JS or something else. – Yuriy Galanter Apr 24 '14 at 17:56
  • What if you changed your markup? Example: http://jsbin.com/xemuyiye/4/edit – Michael Benin Apr 24 '14 at 17:56

2 Answers2

0

jQuery would be ideal... BUT... If you're just using the li as a container, then why don't you apply the focus outline to the anchor tag instead of the list item and apply a tab index to the anchors?

<style>
li.panel { width:1038px; height:340px; }
li.panel a { width:100%; height:100%; }
.active { outline:#00FF00 dotted thick; }
</style>

<ul>    
<li class="panel">
    <a href=""><img src="" alt="" class="active" tabindex="1"></a>
</li>
<li class="panel">
    <a href=""><img src="" alt="" tabindex="2"></a>
</li>
<li class="panel">
    <a href=""><img src="" alt="" tabindex="3"></a>
</li>
</ul>
0

Recently several browsers started to support :focus-within pseudo-class.

But it is still not fully supported in all browsers.

Murval
  • 141
  • 1
  • 11