What is the best way to modify the sibling element when a child of an element is in focus?

Is there a way to change the color of css.seperator when css.searchBarInput is focused?

Here's the HTML code 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> 

This is what I tried so far:

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

Answer №1

If the searchBarBase contains only one focusable element, you can explore the use of the focus-within property.

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

The CSS pseudo-class :focus-within selects an element if it or any of its descendants are in focus. Essentially, it targets an element that matches the :focus pseudo-class itself or has a descendant that matches :focus. This includes descendants within shadow trees.

To apply styles, you can use the selector

.searchBarFirstDiv:focus-within ~ .seperator {/* style to apply here */}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual outcome observed when inputting a random number into HTML using JavaScript

In my HTML file, I am trying to input a number within 50% of a target level into the "Attribute" field. Here is the code: <!DOCTYPE html> <html> <body> <input type = "number" name = "playerLevel" onchan ...

What is the reason for HTML Entity not functioning in the input title for React?

Can someone explain why I am unable to use the HTML Entity &le; in the HTML input title attribute when using a JavaScript constant, but it works fine with a string? The HTML Entity &le; represents the ≤ symbol. To demonstrate this issue, please ...

What is the correct way to initialize a jQuery module within a React component?

In my React component hierarchy, I have a parent component named Sorter. Inside of Sorter, there is a child component for a range slider: <div className="child"> <rangeSlider props=... /> </div> The <rangeSlider props={...}/> ...

Unable to display state image in React/JSX

My approach involves retrieving the path to an image from the database where the image file is stored locally. To keep things dynamic, I store the path as State for the component instead of importing it directly from its location. So... This method works ...

Is it feasible to add to an ID using ngx-bootstrap's dropdown feature?

In the documentation for ngx dropdown, there is a feature called "append to body." I recently tried changing this to append to a table element instead and it worked successfully. Now, on another page, I have two tables displayed. If I were to assign each ...

Tips for simplifying union types in typescript without resorting to strings

One of my local state variables is defined as: const [select, setSelect] = useState<'' | 'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h'>(''); I fi ...

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

If there are over 25 items in the list, extract only the 25 most recent elements each time

My application deals with handling an array of messages where I need to limit the display to only the 25 most recent messages. The challenge is that when using the updateMessage(...) function, I am unable to access the messages.length property directly as ...

Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Righ ...

What is the best way to implement search functionality in React?

Is there a way to enable users to search for holidays by their names in the API-generated holiday list? Users should be able to simply click on the holiday they are looking for in the CRUD table list. I want to make it easy for users to find and access d ...

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

The button color does not instantly change when using UseState

After creating a button using React useState, I decided to use looping to change the color of the buttons dynamically. const [booleanMonth,setMonth]=useState([ {key:0,value:'January',color:'black'}, {key:1,value:'February ...

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

Error: Unable to retrieve the "button" property because theme.typography is not defined

I'm in the process of setting up a new React application with Material-UI (MUI). To customize our styles and containers, we have decided to use styled-components. Following the documentation, I am configuring MUI with styled-components. Additionally, ...

How can I maintain text alignment when it wraps around a floated element?

Currently, I am working on a responsive website project. In the example code provided, I have set the width of the container div to a fixed value to highlight a specific issue. The problem arises when the text wraps onto multiple lines and extends beyond ...

When removing a react component from the list, it results in the deletion of all other components within the same

Whenever I click a button, a new component is added to my list of components. Each component in the list has a delete button, which can remove the component from the list. https://i.sstatic.net/uH42y.png Each component, consisting of the text "New Item" ...

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

Tips for setting different background images for mobile and desktop using react-parallax

Seeking advice on react-parallax (https://www.npmjs.com/package/react-parallax) - Is it possible to display different background images for desktop and mobile devices? Any guidance on achieving this would be greatly appreciated. Many thanks! ...

Using React FC with functions is a great way to enhance the functionality

I am eager to learn how to implement React.FC<> in regular functions on react.js. There are two types of functions I am aware of; the first being (which I personally prefer): function Welcome(props) { return <h1>Hello, {props.name}< ...

Changing the action of a form dynamically with Javascript and Selenium in a Java environment

I am having trouble updating the action attribute of a form using JavaScript and Selenium in Java. Here is the snippet of HTML from the site: </div> <div class="contionue-shopping-wrapper"> <form class="co-formcontinueshopping" action="htt ...