CODEWITHSUNDEEP
csssassaccessibility
Anthony Sharamitaro
Anthony Sharamitaro

Reputation: 11

Child Element Focus State Changes Styling of Parent Element SASS @at-root

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;
  }
}

Upvotes: 1

Views: 1903

Answers (2)

imkremen
imkremen

Reputation: 84

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

Upvotes: 3

Robert K. Bell
Robert K. Bell

Reputation: 10184

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.

Upvotes: 0

Related Questions