change separate element style on focus on other element

Question

How to make it work? 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 think the problem is due to the separate div elements.

score 2 · Answer 1 · answered Sep 01 '20 at 10:09

2

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

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

You can achieve this with :focus-within selector

answered Sep 01 '20 at 10:09

Joshua

3,055
3
22
37

3

This is wrong https://jsfiddle.net/tp9m76vn/, using this, if the `nav` contains more than one element, then the focus will happen on all of them. – Alexandre Elshobokshy Sep 01 '20 at 10:15
2

No, it's not...clearly it works – Paulie_D Sep 01 '20 at 10:18
2

@Paulie_D as I said, if the nav contains more than one element then all of them will be used. Not specifically the `input[type=text]` the OP asked for. – Alexandre Elshobokshy Sep 01 '20 at 10:19
...but the OP **doesn't** have more than one element. – Paulie_D Sep 01 '20 at 10:20
2

@Paulie_D seeing how he specifically asked for `input[type=text]` one assumes he wants only those. – Alexandre Elshobokshy Sep 01 '20 at 10:22
2

This work if we have one element but I specifically asked for `input[type=text]` element as said by @IslamElshobokshy Is there any other way? – Lessey Sep 01 '20 at 10:31
You can *assume* but to say that this is *wrong* is invalid. – Paulie_D Sep 01 '20 at 11:20

Alexandre Elshobokshy · Accepted Answer · 2020-09-01T10:14:24.767

0

You can't. It's only possible if the element is a sibling or a child of the :focus.

Either use Javascript, or put put the div inside the nav (which might not be what you're looking for if you can't change your DOM tree).

#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>

Pure Javascript :

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>

edited Sep 01 '20 at 10:14

answered Sep 01 '20 at 10:04

Alexandre Elshobokshy

10,720
6
27
57

How to make it work then, what changes? – Lessey Sep 01 '20 at 10:05
1

This is a relevant article that explains child and sibling selectors, complains about the missing functionality that the OP needs and demonstrates some jQuery patterns that solve this: https://css-tricks.com/child-and-sibling-selectors/ – Guss Sep 01 '20 at 10:06
@Lessey by either changing your dom, or by using js/jquery. I gave you both solutions, and a pure Js solution. – Alexandre Elshobokshy Sep 01 '20 at 10:14
I tried pure js way and it didn't worked. @IslamElshobokshy – Lessey Sep 01 '20 at 11:00
@Lessey as you can see in my example above, it works. Please make sure that your second div is a class and not an id, and that you have the right css class. – Alexandre Elshobokshy Sep 01 '20 at 11:01
I did the same I used class not id but still it didn't work. @IslamElshobokshy – Lessey Sep 01 '20 at 11:06
@Lessey create a small example in a jsfiddle or something, I can't guess :) – Alexandre Elshobokshy Sep 01 '20 at 11:07
How are you?

Are you doing good?

You will be fine.

Everything will be alright.
ddnnfdnffff
– Lessey Sep 01 '20 at 11:13
The above CSS code is any problem? @IslamElshobokshy – Lessey Sep 01 '20 at 11:15
1

@Lessey it does work https://jsfiddle.net/nk3tcrhb/ – Alexandre Elshobokshy Sep 01 '20 at 11:41
Mine still not working, the js file is correctly linked. Anyway, this is what I was looking for. @IslamElshobokshy – Lessey Sep 01 '20 at 15:09

score -1 · Answer 3 · answered Sep 01 '20 at 10:04

-1

Css can't parse Dom tree like jquery, So it can't parse parent element.

~ operator only work if your element exist in same depth.

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

answered Sep 01 '20 at 10:04

Vicky P

553
6
12

So how to make it work? – Lessey Sep 01 '20 at 10:05
@VickyP, your id is wrong because in the question it is missing too, `id="nav"` – MaxiGui Sep 01 '20 at 11:44

change separate element style on focus on other element

3 Answers3