0

We know doing .parent::after will create an HTML element as the last child of .parent. I want to modify .parent::after when .parent__input's placeholder text is hidden due to typing into the input field. Here is what I did—

.parent::after {
  content: "placeholder visible";
}

.parent__input:not(.parent__input:placeholder-shown) ~ .parent::after {
  content: "placeholder hidden";
}
<div class="parent">
  <input type="text" placeholder="just some text..." class="parent__input">
</div>

.parent__input:not(.parent__input:placeholder-shown) selects all those .parent__input whose placeholder text is hidden, hence the :not(.parent__input:placeholder-shown) part. And since, .parent::after is a child of .parent, and therefore a sibling of .parent__input I could just select .parent::after using general sibling combinator ~, which I did above.

But it isn't working. And I want to do it with pure CSS. Thank you.

Mostafizur Rahman
  • 191
  • 1
  • 6

1 Answers1

0

You can not contact parent using CSS selector.

But you can contact the sibling.

.sibling::after {
  content: "placeholder visible";
}

.parent__input:not(.parent__input:placeholder-shown) ~ .sibling::after {
  content: "placeholder hidden";
}
<div class="parent">
  <input type="text" placeholder="just some text..." class="parent__input">
  <span class="sibling" />
</div>
kyun
  • 9,710
  • 9
  • 31
  • 66
  • This is what I did, but it requires extra markup. So, I thought maybe if I could do that without adding extra markup. And as I've already told you, `.parent::after` is a sibling of `.parent__input`, so it should work, but it doesn't. – Mostafizur Rahman Aug 05 '21 at 09:31