title: changing style for certain divs with the same className
body: <p>I have many small divs with the same classname. Every div has a span with text. But since those divs are pretty small long words doesn't fit in them. I want to make font size smaller for those divs that have long words. But my code changes font </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>var tiles = document.getElementsByClassName('tile');
    for (var i=0; i&lt;tiles.length; i++) {
      var textLength = tiles[i].textContent.length;
      var fontSize = window.getComputedStyle(tiles[i].querySelector('span')).fontSize;
  
      if(textLength &gt; 9) {
        tiles[i].querySelector('span').style.fontSize = "0.6rem";
      } 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tile"&gt;
      &lt;span&gt;itsaveryverylongword&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="tile"&gt;
      &lt;span&gt;bird&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="tile"&gt;
      &lt;span&gt;keyboard&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>size for all divs. How to fix that?</p>