Placeholder

[madhavanand-github]

I tried understanding this CSS for placeholder, but stuck at not(:placeholder-shown), may you please help

.form__textarea:focus + .form__label,
.form__textarea:not(:placeholder-shown) + .form__label {
    opacity: 0;
    transition: 0.5s;
}

[ByteGrad]

There are 2 selectors here (separated by a comma):

1) .formtextarea:focus + .formlabel ----- means select the .formlabel element that is a sibling of a .formtextarea element in the focus state; 2) .formtextarea:not(:placeholder-shown) + .formlabel ----- means select the .formlabel element that is a sibling of a .formtextarea element when its placeholder text is not shown (e.g. when we are typing in the field the browser automatically removes the placeholder text so it is not shown)