How to get first character of string by Jquery or javaScript?
<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>