Well, I'm using a CSS block in which I need to change an element, but this change depends on whether two other elements match a particular state; For example, to change .texto Change, the .texto1 element must be in focus, and the .texto2 element must be empty (or valid / invalid). PS: if I use it separately, type: #box form .text1: focus ~ .text Changeover {....}, okay, it works, as well as if I do: #box form .text2: empty ~ .text Change; or: #box form .text1: validation .texto Change. But how to join these two precedences (~)? That is, I want to use "~ .textChange" only when preceded by two selector conditions. I believe there is a way in CSS itself, and that should be simple, but I tried quite a few combinations and nothing. Thanks for the help.
Oops! beauty, follow codes: first style.css, then test.html
* {
margin: 0;
padding: 0;
}
body {
background-position: center;
background-image: url("../IMAGENS/papel-de-parede-5.jpg");
}
#corpo-form div {
position: relative;
display: block;
height: 55px;
width: auto;
margin: 10px;
border-radius: 5px;
font-size: 16pt;
outline: none;
background-color: rgba(255, 255, 255, 0.7);
}
#corpo-form form .text {
height: 90%;
position: absolute;
padding-left: 5%;
top: 5%;
width: 100%;
border-radius: 5px;
font-size: 12pt;
background: transparent;
border: none;
outline: none;
}
#corpo-form form .text:empty~.placehold {
height: 90%;
pointer-events: none;
font-size: 25pt;
position: absolute;
left: 5%;
top: 20%;
color: rgba(0, 0, 0, .7);
transition: .5s;
}
#corpo-form form .text:focus~.placehold {
color: #ff265c;
top: 3%;
left: 2%;
font-size: 10pt;
transition: .5s;
font-weight: bolder;
}
input[type=submit] {
background-color: #20202f;
color: #fff;
cursor: pointer;
border: none;
width: 100%;
height: 55px;
border-radius: 5px;
font-size: 16pt;
outline: none;
}
input[type=submit]:hover {
background-color: rgba(179, 134, 0, 0.8);
color: #000;
}
#corpo-form h1,
#corpo-form-cad h1 {
text-align: center;
color: #ffffff;
padding: 10px;
font-size: 30pt;
}
#corpo-form a {
margin: 10px;
text-align: center;
text-decoration: none;
color: #ffffff;
display: block;
padding-bottom: 20px;
}
#corpo-form a:hover {
text-decoration: underline;
font-size: 14pt;
}
#corpo-form {
width: 420;
margin: 130px auto 0px auto;
background-color: rgba(0, 0, 0, 0.4);
}
#corpo-form-cad {
width: 420;
margin: 100px auto 0px auto;
}<html lang="pt-br">
<head>
<title>Projeto Login</title>
<link rel="stylesheet" href="CSS/estilo.css">
<script type="text/javascript" src="JS/funcoes.js"></script>
</head>
<body>
<div id="corpo-form">
<form method="POST">
<h1>Login</h1>
<div>
<input type="email" class="text text2" name="email" id="email" required>
<label class="placehold" name="email_hold">Usuário</label>
</div>
<div>
<input type="password" class="text" name="senha" id="senha" required>
<label class="placehold" name="senha_hold">Senha</label>
</div>
<div class="class_submit">
<input type="submit" value="Acessar" onclick="valida_acesso()">
</div>
<br>
<a href="cadastrar.php">Ainda nao é inscrito?<strong> Cadastre-se!</strong></a>
</form>
</div>
</body>
</html>