When constructing a selector I am getting an error if space included
<p>When building a selector I want to have a space to indicate that a class is to be found within an element defined by two classes. I am sure that I have used this syntax elsewhere.</p>

<p>But on this occasion I get:</p>

<blockquote>
  <p>Error: Syntax error, unrecognized expression: " [Break On This Error] throw new Error( "<br>
  Syntax error, unrecognized expression: " + msg );</p>
</blockquote>

<p>Here is the selector:</p>

<pre><code>tag = $(".m_3.current_Status .smoothie_Text").prop("tagName");
</code></pre>

<p>If I remove the space before .smoothie_Text the syntax error disappears but obviously tag is undefined as it cannot be found.</p>

<p><strong>EDIT</strong></p>

<pre><code>&lt;td class="m_1 current_Status" style="background-color: rgb(255, 127, 0); color: rgb(255, 255, 255);"&gt;
&lt;div class="smoothie hasSVG"&gt;
&lt;input class="smoothie_Text" type="hidden" value="Super Power"&gt;
&lt;svg version="1.1" stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" overflow="visible" width="10" height="10" viewBox="0 0 236.25 225"&gt;
&lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>*<em>EDIT - Solution (#2 shortened) *</em></p>

<p>Note - in the end I did not use the comma separated approach. I cannot be certain why previous attempt to in groups of classes separated by a space failed, but, I suspect that the select submitted was enclosed in quotes.     </p>

<pre><code>$(".smoothie").on("mouseover", function(event) {

    var containerElements = $(event.target).parentsUntil($("tr").parent())
         .map(function () { 
             return this.className; 
         })
         .get().join(",");

    containerArray = containerElements.split(",");
    row_Class = containerArray.pop();
    row_Classes = row_Class.split(" ");
    container_Class = containerArray.pop();
    container_Classes = container_Class.split(" ");

    var offset = $(event.target).offset();

    value = $("." + row_Classes[0] + "." + row_Classes[1] + " ." + container_Classes[0] + "." + container_Classes[1] + " .smoothie_Text").attr("value");

    $("#flavour_Text").html("&lt;a&gt;" + value + "&lt;/a&gt;");
    $("#flavour_Text").css("top", offset.top);
    $("#flavour_Text").css("left", offset.left);
    $("#flavour_Text").css("width", (value.length * 0.6) + "em")
    $("#flavour_Text").css("display","block");

    // this dsiplays all. Needs refinement

}).svg({loadURL: '../_public/_icons/smoothie.svg'});   

$(".smoothie").on("mouseout", function(event) {
    $("#flavour_Text").html("");
    $("#flavour_Text").css("display","none");
}).svg({loadURL: '../_public/_icons/smoothie.svg'});  
</code></pre>
