How to make changes to the sibling element if child of an element is focused?

Question

I want to change colour of css.seperator when css.searchBarInput is in focus, how can I do this?

Here's my HTML for reference:

<div className={css.searchBarBase}>
  <div className={css.searchBarFirstDiv}>
    <label className={css.searchBarDivContent} htmlFor="location-search-input">
      <div className={css.searchBarHeadingFont}>Location</div>
      <input
      id="location-search-input"
      className={css.searchBarInput}
      />
    </label>
  </div>

  <div className={css.seperator}/>
</div>

Here's my attempt at it:

.searchBarBase > div:focus-within + div {
  opacity: 0;
}

These elements are NOT siblings. – Paulie_D Oct 07 '21 at 18:36 — Paulie_D, Oct 07 '21 at 18:36
@Paulie_D please reread the question. – Rija Saleem Oct 07 '21 at 19:35 — Rija Saleem, Oct 07 '21 at 19:35

score 0 · Accepted Answer · answered Oct 07 '21 at 18:40

If there is only one focusable element inside searchBarBase then you can look at focus-within.

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

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. 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.)

selector to use for you would be .searchBarFirstDiv:focus-within ~.seperator {/* style to apply here */}

How to make changes to the sibling element if child of an element is focused?

1 Answers1