سلام دوستان. چرا این دو تا کلاس در یک div برام کار نمیکنه؟؟ ولی در آموزش های استاد کار میکنه

دوستان کد زیر رو مشاهده کنین. برای من دو تا کلاس col , red در jquery کار نمیکنه

<div id="content" class="ltr">
      <span class="col red">Sample 1</span>
      <span class="col blue">Sample 2</span>
      <span class="col  green">Sample 3</span>
      <span class="col red">Sample 4</span>
      <span class="col  blue">Sample 5</span>
      <span class="colored">Sample 6</span>
</div>
</body>
</html>

<script>
  $(function(){
     $('.red').each(function(){
       $(this).css('color' , 'red');
     });

     $('.blue').each(function(){
       $(this).css('color' , 'blue');
     });

     $('.green').each(function(){
       $(this).css('color' , 'green');
     });

    $('.col').each(function(){
      if ($(this).css('color') == 'rgb(255 , 0 , 0)'){
        $(this).css('background-color' , '#000');
      }
    });
    $('span').css('padding' , '10px');
    $('col').on('mouseover', function(){
      $(this).css('background-color' , '#f80');
    });

  });
</script>