Почему не работает селектор в css?

Question

[dmitrijjjjj]

CSS

.username {
    position: absolute;
    color: #7a7a7a;
    border: none;
    border-bottom: 2px solid;
    inline-size: 375px;
    left: -10px;
    top: 30px;
    outline: none;
    transition: all .3s;
    z-index: -1;
}

.username:focus {
    color: black;
}

.username:focus ~ .for-username,
.username:not(:placeholder-shown) ~ .for-username {
    font-size: 12px;
    opacity: .6;
    top: 15px;
}     /* НЕ РАБОТАЕТ ЭТА ЧАСТЬ */

.email {
    color: #7a7a7a;
    border: none;
    position: absolute;
    border-bottom: 2px solid;
    inline-size: 375px;
    top: 80px;
    left: -10px;
    outline: none;
    transition: all .3s;
    z-index: -1;
}

.email:focus {
    color: black;
}

.password {
    position: absolute;
    color: #7a7a7a;
    border: none;
    border-bottom: 2px solid;
    inline-size: 375px;
    left: -10px;
    top: 130px;
    outline: none;
    transition: all .3s;
    z-index: -1;
}

.password:focus {
    color: black;
}

.confirm-password {
    color: #7a7a7a;
    border: none;
    border-bottom: 2px solid;
    inline-size: 375px;
    position: absolute;
    top: 180px;
    left: -10px;
    outline: none;
    transition: all .3s;
    z-index: -1;
}

.confirm-password:focus {
    color: black;
}

.form-group {
    width: 500px;
    position: absolute;
    top: 120px;
    left: 430px;
}

    position: absolute;
    color: #7a7a7a;
    top: 20px;
    left: -10px;
    font-family: sans-serif;
    font-size: 17px;
    font-weight: bold;
    transition: all .3s;
}

.for-email {
    position: absolute;
    color: #7a7a7a;
    top: 70px;
    left: -10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    font-weight: bold;
    transition: all .3s;
}

.for-password {
    position: absolute;
    color: #7a7a7a;
    top: 120px;
    left: -10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    font-weight: bold;
    transition: all .3s;
}

.for-confirm-password {
    color: #7a7a7a;
    position: absolute;
    top: 170px;
    left: -10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    font-weight: bold;
    transition: all .3s;
}

HTML

<form method="post">
            <div class="form-group">
                <label class="for-username">Ім'я користувача:</label>
                <input class="username" placeholder=" ">
            </div>
            <div class="form-group">
                <label class="for-email">Gmail:</label>
                <input class="email" placeholder=" ">
            </div>
            <div class="form-group">
                <label class="for-password">Пароль:</label>
                <input class="password" placeholder=" ">
            </div>
            <div class="form-group">
                <input class="confirm-password" placeholder=" ">
                <label class="for-confirm-password">Підтвердження пароля:</label>
            </div>
            <input type="submit" id="submit" value="Зареєструватися">
          </form>

выше я указал что не работает

Comments

[Вадим]

Для кода, в том числе html, нужно использовать соответствующий тэг code, который доступен в редакторе сообщения через кнопку </>

[ThunderCat]

Примеры содержащие сложные зависимости и много кода крайне желательно переносить в песочницы, кодепен или жсфиддл например.

Answer 1

[Ankhena]

1. Плейсхолдер не должен быть пустым. Хотя бы неразрывный пробел  
2. Посмотрите на хотя бы в вопросе. Видите, кусок жирный? Исправьте.
3. Изучите селекторы
.username:focus ~ .for-username
Это значит: найди for-username, которые идут следом, на том же уровне, что и username и когда он в фокусе.
Таких элементов не существует, потому что в коде всюду сначала label, а потом input.
Т.е. либо использовать :focus-within либо менять разметку.

Comments

[dmitrijjjjj]

Спасибо за ответ, я учту эту ошибку, но проблема с анимацией не решена

[Ankhena]

dmitrijjjjj,
1. Посмотрите на хотя бы в вопросе. Видите, кусок жирный? Исправьте.
2. Изучите селекторы
.username:focus ~ .for-username
Это значит: найди for-username, которые идут следом, на том же уровне, что и username и когда он в фокусе.
Таких элементов не существует, потому что в коде всюду сначала label, а потом input.
Т.е. либо использовать :focus-within либо менять разметку.

[Ankhena]

dmitrijjjjj, ау?

[dmitrijjjjj]

Ankhena, спасибо большое

[Ankhena]

dmitrijjjjj, тут принято отмечать решениями ответы, которые могут помочь в решении вашего вопроса, а также помочь другим с аналогичными.