What does the + sign mean in CSS?


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() {

 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;
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" />

<div class="form-group">
  <input type="text" name="email" id="email" class="campo" />
asked by anonymous 07.10.2015 / 18:03

2 answers


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:


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


07.10.2015 / 18:23

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