javascript - jQuery: Find element outside of class -

i want select first element matches criteria outside of container.
know how find if it's inside when it's outside, i"m not sure.
want select very first element finds also, attempt:

   $('.text').click(      function(){          $(this).css('font-size', '50px');          $(this).next('span').css('color','red');            });

.one{    background:orange;    border:1px solid black;    height:200px;    width:200px;  }  span{    display:block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>

so, in example. if click on first text in orange box labeled "text", change color of span directly outside red. above box , below it. not affect other span, first one.

$('.text').click(      function(){          $(this).css('font-size', '50px');          $(this).parent().next('span:first').css('color','red');            });

.one{    background:orange;    border:1px solid black;    height:200px;    width:200px;  }  span{    display:block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>  <div class="one">      <p class="text">    text    </p>     </div>  <span>first</span>  <span>second</span>