Adjust the style of one element when another element is in focus

Question

Adjust the style of one element when another element is in focus

How can I get this to function properly? HTML

#nav input[type=text]:focus ~ #two {
   color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

I believe the issue may be related to the individual div elements.

html css

Answer 1

Answer №1

#nav:focus-within ~ #two {
  color: red;
}

<div id="header">
  <input type="text" placeholder="Search here" name="search" />
</div>
<div id="content">Content goes here</div>

This styling can be applied using the :focus-within pseudo-class.

Answer 2

#nav:focus-within ~ #two {
  color: red;
}

<div id="header">
  <input type="text" placeholder="Search here" name="search" />
</div>
<div id="content">Content goes here</div>

This styling can be applied using the :focus-within pseudo-class.

Answer 3

Answer №2

Unfortunately, it is not possible to do so unless the element is a sibling or child of the :focus.

To achieve this effect, you can either utilize Javascript or place the div inside the nav element, although this may not align with your desired DOM structure.

#nav input[type=text]:focus~#two {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
  <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

Javascript Solution :

var navbar = document.getElementById('nav')

navbar.addEventListener('focusin', toggleClass);
navbar.addEventListener('focusout', toggleClass);

function toggleClass() {
  document.querySelector('.two').classList.toggle('redColor');
}

.redColor {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div class="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

Answer 4

Unfortunately, it is not possible to do so unless the element is a sibling or child of the :focus.

To achieve this effect, you can either utilize Javascript or place the div inside the nav element, although this may not align with your desired DOM structure.

#nav input[type=text]:focus~#two {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
  <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

Javascript Solution :

var navbar = document.getElementById('nav')

navbar.addEventListener('focusin', toggleClass);
navbar.addEventListener('focusout', toggleClass);

function toggleClass() {
  document.querySelector('.two').classList.toggle('redColor');
}

.redColor {
  color: red;
}

<div id=nav>
  <input type="text" placeholder="Search" name="search">
</div>
<div class="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>

Answer 5

Answer №3

Cascading Style Sheets (CSS) does not have the ability to analyze the Document Object Model (DOM) tree like jQuery can, making it unable to parse parent elements.

The `~` operator will only function properly if your element is located at the same depth in the DOM.

<div id=nav>
    <input type="text" placeholder="Search" name="search">
    <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

Answer 6

Cascading Style Sheets (CSS) does not have the ability to analyze the Document Object Model (DOM) tree like jQuery can, making it unable to parse parent elements.

The `~` operator will only function properly if your element is located at the same depth in the DOM.

<div id=nav>
    <input type="text" placeholder="Search" name="search">
    <div id="two">Two jfjsoijfoisoivnosnovdnsnnoivnoinsionvonoiniso</div>
</div>

Adjust the style of one element when another element is in focus

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to create a flawless circular image with a card in Bootstrap 5?

The html element is failing to adjust its height to match the entirety of the browser window, even when set to

Tips for ensuring the footer remains at the bottom of the page

Issue arises when CSS selectors do not function properly with absolutely positioned divs

Unable to generate a navigation panel using HTML/CSS and jQuery

The counter variable does not function properly within a setInterval function

Trouble arises when attempting to include numerous Visualforce components on a single page

Get key values in Javascript/JSON by the maximum value of the key in the property

Is there a way to make my Bootstrap carousel display three cards at a time in a continuous cycle?

How can we align images above one another in a responsive manner using Bootstrap 3?

issues with responsive mobile navigation

Cause a bootstrap column to have overflowing content rather than expanding

Performing Jquery functions on several elements at once

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Align FontAwesome icons of various sizes vertically in a bullet-point list

Open the HTML document and access the file contents

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

Email Embedder - Incorporating HTML source code into email communications

Turn off HTML display for Internet Explorer users

A demonstration of VueJS Nested Builder functionality