Why does HTML element order influence CSS effects? - html

Question

I have the following code:
$(document).ready(function() {
$('.input').append('<div class="expander"></div>');
});
.input {
position: relative;
height: 5.85714rem
}
.input input {
outline: 0;
width: 100%;
border: none;
background: 0 0;
border-bottom: .07143rem solid rgba(0, 0, 0, .42);
font-size: 1.14286rem;
padding-bottom: .57143rem;
position: absolute;
bottom: 1.42857rem;
}
.input input:hover+label {
color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
border-bottom: .14286rem solid rgba(0, 0, 0, .87);
padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
color: #304ffe;
font-size: .85714rem;
bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
width: 100%;
left: 0;
height: .14286rem
}
.input label {
color: rgba(0, 0, 0, .54);
font-size: 1.14286rem;
position: absolute;
left: 0;
bottom: 2.07143rem;
font-weight: 400;
}
.input .expander {
width: 0;
background: #304ffe;
position: absolute;
height: .07143rem;
left: 50%;
bottom: 1.42857rem;
-webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
transition: all cubic-bezier(.4, 0, .2, 1) 3s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
<input type="text" name="name" id="name">
<label for="name">Name</label>
</div>
In the above example, clicking on the input moves the label, but the border color doesn't change. I'm using jQuery 3.2.1.
.input {
position: relative;
height: 5.85714rem
}
.input input {
outline: 0;
width: 100%;
border: none;
background: 0 0;
border-bottom: .07143rem solid rgba(0, 0, 0, .42);
font-size: 1.14286rem;
padding-bottom: .57143rem;
position: absolute;
bottom: 1.42857rem;
}
.input input:hover+label {
color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
border-bottom: .14286rem solid rgba(0, 0, 0, .87);
padding-bottom: .5rem
}
.input input:active+label,
.input input:focus+label {
color: #304ffe;
font-size: .85714rem;
bottom: 3.85714rem
}
.input input:active+.expander,
.input input:focus+.expander {
width: 100%;
left: 0;
height: .14286rem
}
.input label {
color: rgba(0, 0, 0, .54);
font-size: 1.14286rem;
position: absolute;
left: 0;
bottom: 2.07143rem;
font-weight: 400;
}
.input .expander {
width: 0;
background: #304ffe;
position: absolute;
height: .07143rem;
left: 50%;
bottom: 1.42857rem;
-webkit-transition: all cubic-bezier(.4, 0, .2, 1) 1s;
transition: all cubic-bezier(.4, 0, .2, 1) 1s
}
<div class="floating-input input">
<input type="text" name="name" id="name">
<div class="expander"></div>
<label for="name">Name</label>
</div>
Another example is where the label and .expander rules are basically switched in order. The label is stuck but the border changes. This time I added the <div class="expander"></div> manually but it should be automatic.
The expected result would be that the label is moved above the input and the border changes its color. So the expected result would basically be the 2 examples shown merged together.
What causes either effect to not work and how do I fix it?

Answer 1

You're using a CSS selector (the +) which depends on element order.
input:hover+.expander matches a .expander immediately after an input:hover, but not the other way around.

Answer 2

Instead of + it should be ~. With ~ the elements don't need to be directly behind the input.
$(document).ready(function() {
$('.input').append('<div class="expander"></div>');
});
.input {
position: relative;
height: 5.85714rem
}
.input input {
outline: 0;
width: 100%;
border: none;
background: 0 0;
border-bottom: .07143rem solid rgba(0, 0, 0, .42);
font-size: 1.14286rem;
padding-bottom: .57143rem;
position: absolute;
bottom: 1.42857rem;
}
.input input:hover~label {
color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
border-bottom: .14286rem solid rgba(0, 0, 0, .87);
padding-bottom: .5rem
}
.input input:active~label,
.input input:focus~label {
color: #304ffe;
font-size: .85714rem;
bottom: 3.85714rem
}
.input input:active~.expander,
.input input:focus~.expander {
width: 100%;
left: 0;
height: .14286rem
}
.input label {
color: rgba(0, 0, 0, .54);
font-size: 1.14286rem;
position: absolute;
left: 0;
bottom: 2.07143rem;
font-weight: 400;
}
.input .expander {
width: 0;
background: #304ffe;
position: absolute;
height: .07143rem;
left: 50%;
bottom: 1.42857rem;
-webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
transition: all cubic-bezier(.4, 0, .2, 1) 3s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
<input type="text" name="name" id="name">
<label for="name">Name</label>
</div>