What does the + sign mean in CSS?

Navigation
27

For example: 

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

}

I'm making an effect here, but I'm not understanding this + sign in the framework.

Final score 

 $(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><divclass="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>
    
asked by anonymous 07.10.2015 / 18:03

2 answers

29

This selector + in CSS is called Adjacent sibling selector .

The sign of + (Adjacent Selector) in css reminds me a lot of the siblings method of jQuery, which has the purpose of taking a brother element. In the case of css , it represents a subsequent element (next) to that indicated above.

It is useful, for example, if you want to indicate that a input , when preceded by a label , has a different formatting.

See the example: 

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

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

References:

07.10.2015 / 18:23
7

According to the W3C reference

Assigns style to next element after previous

  

Example: div + p

     

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

    
07.10.2015 / 18:16
Programming in C for ARM MySQL Limit Equivalent in SQL Server