29

Por exemplo:

.input__field--minoru:focus + .input__label--minoru::after {

}

Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.

Resultado Final

 $(document).ready(function() {

   $(".campo").on('click', function() {
     $(this).closest('div.form-group').addClass('active');
   });

 });
 div.form-group {
   width: 100%;
   max-width: 700px;
   margin: auto;
   margin-top: 20px;
   position: relative;
   z-index: 1;
 }
 div.active input[type="text"]:focus + label:after {
   animation: AnimShadow 0.3s forwards;
 }
 label {
   font-family: @pf_din_text;

font-size: 16px;
   color: #959ea4;
   display: block;
   padding-top: 10px;
   padding-left: 8px;
 }
 label:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
   width: 100%;
   height: 57px;
   box-shadow: 0px 0px 0px 0px;
   color: rgba(199, 152, 157, 0.6);
 }
 input[type="text"] {
   width: 95%;
   border: none;
   font-family: "Verdana";
   font-size: 16px;
   color: #959ea4;
   background-color: #FFF;
   text-indent: 8px;
   height: 55px;
   outline: none;
   box-shadow: 0px 0px 0px 1px transparent;
   transition: all 0.3s ease;
 }
 input[type="text"]:focus {
   box-shadow: 0px 0px 0px 1px #FF9D12;
 }
body{
background-color: #f9f7f6;
}
 @keyframes AnimShadow {
   to {
     box-shadow: 0px 0px 100px 50px;
     opacity: 0;
   }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="nome" id="nome" class="campo" />
  <label>Nome</label>
</div>

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
  <label>Email</label>
</div>

2
  • 2
    +1 Essa é um ótima pergunta @DeeSouza. Commented 7/10/2015 às 16:24
  • 2
    Obrigado. Eu estou fazendo um efeito no meu campo de texto e no framework está assim e não estava conseguindo implementar no site. E eu tinha certeza que era por causa que eu não tinha colocado essa instrução com o +. Porém, não sabia usar porquê não entendia o que fazia. Vou postar o que fiz. Commented 7/10/2015 às 16:26

2 Respostas 2

29

Esse seletor + em CSS é chamado de Adjacent sibling selector.

O sinal de + (Adjacent Selector) no CSS me lembra muito o método siblings do jQuery, que tem a finalidade de pegar um elemento irmão. No caso do CSS, representa um elemento subsequente (próximo) ao indicado anteriormente.

É útil, por exemplo, se você quer indicar que um input, quando estiver precedido por um label, tenha uma formatação diferente.

Veja o exemplo:

.teste-a{
  background:red;
  color:white;
}

label+.teste-a{
  background:blue !important;
}
<input class="teste-a">
<label>teste b</label>
<input class="teste-a">

Referências:

1
  • 2
    Entendi! Top. Vou usar mais esse recurso, principalmente em formulários. Commented 7/10/2015 às 16:45
7

Conforme a referência do W3C

Atribui o estilo para o próximo elemento após o anterior

Exemple: div + p

Select and style every <p> element that are placed immediately after <div> elements:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .