Focus selector in Sass

Question

I focus in the input field and need to change the color of an icon and border-bottom of that class. How do I do it in Sass? I have already tried:

input
 + .input-group-addon // this is icon class
   &:focus
    border-bottom: solid 2px #004eff

However it does nothing. Could you please help me? This is what HTML looks like.

<div class="form-group" class="col-md-offset-1 col-xl-offset-1  focus-icon">
      <div class="input-group">
        <div class="input-group-addon man-icon"></div>
        <input type="email" placeholder="Логин"  required>
      </div>
    </div>

Solution

Try this. EDIT: I had missed a . when i pasted the answer.

.input-group
  input
    &:focus
      & + .input-group-addon
        border-bottom: solid 2px #004eff

Here you can see the SASS generated CSS in action. NOTE: The position in the DOM for "the icon" has been moved.

.input-group input:focus+.input-group-addon {
  border-bottom: solid 2px #004eff;
}

<div class="form-group" class="col-md-offset-1 col-xl-offset-1  focus-icon">
  <div class="input-group">

    <input type="email" placeholder="Логин" required>
    <div class="input-group-addon man-icon"></div>
  </div>
</div>

Comments

[Thomas Wikman]

Then I'd like to know what the indeded CSS should look like. if you dont want the input + .input-group-addon but instead want input.input-group-addon, you need to remove the + and a space, so that it becomes &.input-group-addon

[Kate]

Guess I'm not good at describing what I want. I have an input field and icon next to it. When I focus on input it is underlined with blue, however the icon is still underlined with grey, while I want it to be blue as well. Does that make sense?

[Thomas Wikman]

I changed it, tried it. Sorry for the sloppy first answer. Focused on the syntax, not the intended result (screaming toddlers in the background tend to make me less focused) :)

[Kate]

It's okay. You were trying to help :)

[Thomas Wikman]

Kids are sleeping. Answer is checked and dubble checked. :) Included the SASS-generated CSS with a "Run code snippet".