Outline list item when child anchor tag is getting focus

Question

I am trying to change the background of the list item when the focus is on the anchor tag. It works on hover, How can I change the background during focus?

I want to make the list more accessible so that even when the user focuses on the anchor tag, the respective list item should also highlight

.main-list{
  padding: 10px;
  margin: 0 10px;
}

.main-list .list-item{
  list-style-type: none;
  background: #ccc;
  padding: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.main-list .list-item:hover, .main-list .list-item:focus{
  background: #ddd;
}

<ul class="main-list">
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
</ul>

If you want to consider focus of `a` (duplicate 2 (here: https://stackoverflow.com/a/46406959/8620333) and 3) ... If you want the focus on li (duplicate 1) — Temani Afif, Aug 30 '19 at 12:48

score 1 · Accepted Answer · answered Aug 30 '19 at 12:47

1

Use focus-within. Disclaimer: how compatible do you need it to be?

.main-list{
  padding: 10px;
  margin: 0 10px;
}

.main-list .list-item{
  list-style-type: none;
  background: #ccc;
  padding: 10px;
  border-bottom: 1px solid #333;
  cursor: pointer;
}

.main-list .list-item:hover, .main-list .list-item:focus-within{
  background: #ddd;
}

<ul class="main-list">
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
 <li class="list-item"><a href="#">dummy text</a></li>
</ul>

answered Aug 30 '19 at 12:47

Mr Lister

42,557
14
95
136

Thanks, I was looking for a css solution. Any support for IE and edge? – bhansa Aug 30 '19 at 12:51
Edge support will arrive as soon as the Edge version based on Blink is released. IE, well, no. – Mr Lister Aug 30 '19 at 12:54
1

But why don't you simply move all the styles for
to the s inside, like the padding and stuff. Then the s will cover the
s completely and you can use `:focus` on the s.

Mr Lister

Aug 30 '19 at 12:56

Outline list item when child anchor tag is getting focus

1 Answers1