What does the + sign in CSS mean?

Asked

Viewed 1,630 times

28

For example:

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

}

I’m having an effect here, but I don’t understand this sign + you have in the framework.

Final Result

 $(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>

css css-selectors
  • 2

    +1 That’s a Great Question @Deesouza.

  • 2

    Thank you. I am making an effect on my text field and the framework is like this and was not able to implement on the site. And I was sure it was because I hadn’t put that instruction with the +. However, I didn’t know how to use it because I didn’t understand what I was doing. I will post what I did.

2 answers

29


That selector + in CSS is called Adjacent sibling selector.

The sign of + (Adjacent Selector) in CSS reminds me a lot of the method siblings jQuery, which is intended to pick up a sibling element. In the case of CSS, it represents a subsequent element (next) to the one previously indicated.

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

Take 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:

  • 2

    Got it! Top. I will use this feature more, mainly in forms.

7

According to the reference of W3C

Assign the style to the next element after the previous one

Example: div + p

Select and style Every <p> element that are placed immediately after <div> Elements:

Browser other questions tagged css css-selectors

You are not signed in. Login or sign up in order to post.