0

When the child element span.icon-hamburger in the below code receives a :focus state, I am wanting to change the styling of the li element. Using a SASS solution, I read that @at-root could work here. I am unable to find a SASS solution for this use-case using @at-root, however. What are your thoughts for this use-case?

HTML:

<ol>
  <li>
    <span class="icon-hamburger"></span>
  </li>
</ol>

CSS/SASS:

.icon-hamburger:focus {
  @at-root ol li #{&} {
    background-color: #fff;
  }
}
Anthony Sharamitaro
  • 1
  • 2

2 Answers2

0

From this excellent answer by Dan Herbert:

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

Selectors Level 3 Spec

CSS 2.1 Selectors Spec

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

N.B., there's some discussion over the possibility of doing so in CSS4.

Community
  • 1
  • 1
Robert K. Bell
  • 6,539
  • 2
  • 34
  • 46
0

There is no solution for IE and Edge but for Chrome and Firefox you can use :focus-within CSS pseudo-class.

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

imkremen
  • 44
  • 3