title: How to get first character of string by Jquery or javaScript?
body: <p>I have a span with inner span and I'm trying to get the first character of the inner span (t) and change its color. I tried to do that with many way with both JavaScript and jQuery and it doesn't work</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// with javascript    
  
  var index = document.getElementById('spa');
  var indexsl = index.slice(0, 1);
  indexsl.style.color = "f00"; //doesn't work
  
  var index = document.getElementById('spa');
  var indexsl = index.substring(0, 1);
  indexsl.style.color = "f00"; //doesn't work
  
  var index = document.getElementById('spa');
  var indexsl = index.charAt(0, 1);
  indexsl.style.color = "f00"; //doesn't work
  
  
  // with jQuery
  
  var index = $('.design span').charAt(0);
  index.css('color', '#f00') // doesn't work
  
  var index = $('.design span').substring(0, 1);
  index.css('color', '#f00') // doesn't work
  
  var index = $('.design span').slice(0, 1);
  index.css('color', '#f00') // doesn't work</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span class="design"&gt;DESIGNED BY &lt;span id="spa"&gt;Teodor Victor&lt;/span&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>