CSS selecting input with parent span :before pseudo

Asked Feb 21 '16 at 11:54

Active Feb 21 '16 at 12:15

Viewed 26 times

Basically, what I want to do is display the :before of the parent span when the input is focused. This is my code. HTML:

<span>
  <input type="text" placeholder="Some text here" />
  <p>Error will be shown here.</p>
</span>

And CSS:

input[type=text]:focus + span:before{
   display: inline-block;
   position: absolute;
   content: "";
   width: 200px;
   height: 30px;
   background-color: #000;
   border: 1px solid #f00;
   top: 0;
   left: 0;
}

But this won't work. The :before is never displayed. Maybe there is something I'm not doing right. Any help will be appreciated.

This question is not a duplicate of Is there a CSS parent selector?, in that I'm not trying to select the parent. I'm selecting the :before of the parent. Doing something like span > input:focus works but span:before > input:focus does not work.

edited May 23 '17 at 11:45

Community

asked Feb 21 '16 at 11:54

Supreme Dolphin

1,340
12
18

As indicated you can't select a parent container from the children. Also, the HTML is invalid. A `span` cannot contain a `p` tag. – Paulie_D Feb 21 '16 at 11:58
A parent can be selected from children – Supreme Dolphin Feb 21 '16 at 12:18
No, I'm afraid...it can't. ...and you **are** try to select the parent. The pseudo-element is still part of the parent. – Paulie_D Feb 21 '16 at 12:46
More suitable duplicate perhaps? http://stackoverflow.com/questions/7735267/can-i-target-an-after-pseudo-element-with-a-sibling-combinator – BoltClock Feb 21 '16 at 16:16

CSS selecting input with parent span :before pseudo

0 Answers0