0

I'm not sure what to search for regarding this issue, so forgive me if there's answers to this question already out there.

Can somebody please explain to me why the style is not being applied to #input-label when #input is focused?

#input:focus #input-label {
  border: solid red 1px;
  background: orange;
}
<label id='input-label' for='input'>Label:</label>
<input id='input' type='text' value='Input' />
oldboy
  • 5,729
  • 6
  • 38
  • 86
  • That code is targeting `#input-label` inside of `#input:focus` so it will never connect to your HTML. – BugsArePeopleToo Apr 24 '19 at 21:51
  • I'm confused? What do you mean? I had it working locally before. Unfortunately I saved over it. – oldboy Apr 24 '19 at 21:52
  • @Temani Afif how would i achieve something like this?? – oldboy Apr 24 '19 at 21:54
  • https://stackoverflow.com/q/16859542/8620333 – Temani Afif Apr 24 '19 at 22:00
  • 1
    @Anthony Your current selector is a descendant selector. `input:focus #input-label` would roughly equal "when input is focused, look for a CHILD element of INPUT with #input-label and apply a border/background". What you're looking to do will need an adjacent (`+`) sibling selector (or general `~`) as well as reversing the DOM order of your elements (as `+|~` won't apply to previous-siblings). – Jack Apr 24 '19 at 22:09
  • @Jack thanks. any idea y theres no previous sibling and only following sibling selectors?? – oldboy Apr 24 '19 at 22:10
  • 1
    @Anthony - In the past people chalked it up to `performance`. There are some interesting workarounds/solutions for previous sibling selectors here: https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector - most are visual solutions, however. CSS4 brings `:has`, which looks very interesting. – Jack Apr 24 '19 at 22:51
  • @Jack any idea when CSS4 is dropping? – oldboy Apr 24 '19 at 23:16
  • 1
    @Anthony - It's actually out now! :D Some browsers have limited support for various CSS4 selectors. Here's a page that will test CSS4 selectors and your browser: https://css4-selectors.com/browser-selector-test/ I think the real question is when CSS4 support will be good enough for us to fully adopt as developers. That, unfortunately, I'm not sure. I suspect `:has` has a whiles to go before we can safely use it in production. – Jack Apr 25 '19 at 00:14
  • 1
    @Jack interesting. thx for sharing – oldboy Apr 25 '19 at 05:25

0 Answers0