Seeking for css/ scss selector to change :before behavior on :focus

Question

I have some SCSS code here:

  .location {
    animation-delay: 80ms;
    position: relative;
    &:before {
      font-family: "FontAwesome";
      font-size: 24px;
      content: "\f041";
      position: absolute;
      left: 4px;
      top: 12px;
    }
    input {
      text-indent: 28px;
    }
  }

I want to change the text color of .location:before, ON .location input:focus. Is this even possible with pure css?

Any help is appreciated :)

No...from your question you appear to be asking for a **parent selector** which does not exist in CSS. — Paulie_D, Jul 11 '17 at 13:48
https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Paulie_D, Jul 11 '17 at 13:49
Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — feeela, Jul 11 '17 at 14:03

score 0 · Answer 1 · answered Jul 12 '17 at 09:57

Try this

$(document).ready(function() {
  $('.location input').on('focusin', function(event) {

    $('.location').addClass('text-red')

  }).on('focusout', function(event) {

    $('.location').removeClass('text-red')

  });
})

.location {
  animation-delay: 80ms;
  position: relative;
}

.location:before {
  content: "Hi....";
  //font-family: "FontAwesome";
  //font-size: 24px;
  //content: "\f041";
  position: absolute;
  left: 4px;
  top: 20px;
}

input {
  text-indent: 28px;
}

.text-red:before {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location">
  <input type="text" name="">
</div>

Seeking for css/ scss selector to change :before behavior on :focus

1 Answers1