是否可以选择最近的css选择器或父级

Question

Sorry for the generically worded title, anyway, I have some simple HTML like so:

<div class="block flex-1 mx-4 relative w-1/2">
    <div class="form-group label-floating">
        <label class="control-label">Password</label>
        <input class="form-control" placeholder="" type="password">
        <span class="material-input"></span>
    </div>
</div>

Now, whenver a person clicks the input, I am shrinking the label size like so:

With the following css:

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

Now, my problem is, if the input is not empty and the user leaves the input, the label will return to the normal size. So I have tried things like so:

with the following css:

&.label-floating {

    &:focus-within {
        & > .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }

    & input:not(:empty){
        & .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
        & < .control-label {
            top: 10px;
            font-size: 11px;
            line-height: 1.07143;
        }
    }
}

With no avail, so, my question is, is there a way to achieve what I want, with pure css?

edit: can someone please edit the OP to embed the images, please.

Updated with pure css:

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group > .control-label {
  color: #888da8;
}

.form-group.label-floating:focus-within > .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

.form-group.label-floating input:not(:empty) .control-label {
  top: 10px;
  font-size: 11px;
  line-height: 1.07143;
}

Answer 1

You cannot target an input that contains a value without checking if the content is valid. You can, however, use a round-about way to check if the input has no value.

Your input has a placeholder attribute. The CSS selector :placeholder-shown will target inputs which are showing a placeholder; that is, inputs that have a placeholder attribute specified and are not empty.

You must therefore style the empty input's label.

 .form-control:placeholder-shown ~ .control-label { font-size: 20px; color: red; } .label-floating:focus-within > .control-label, .form-control ~ .control-label { font-size: 11px; color: blue; } 

 <div class="form-group label-floating"> <input class="form-control" placeholder="" type="password"> <label class="control-label">Password</label> </div> 

Note that :placeholder-shown is not implemented in IE/Edge, despite being highly requested ; there are, however, polyfills available.