How to a reference an HTML element with id+class in jQuery?

Question

In the following javascript/html, I can reference div.answer but how do I reference div#flashcard-001.answer?

HTML:

<div id="flashcard-001" class="flashcard">
    <div class="question">What color is the sky?</div>
    <div class="answer">blue</div>
    <button class="show">Show</button>
    <button class="hide">Hide</button>
</div>

Javascript:

//run when page is loaded
google.setOnLoadCallback(function() {
    $("div.answer").hide(); //WORKS
    $("div#flashcard-001.answer").hide(); //DOES NOT WORK
    $("button.show").bind("click", function(e) {
     $("div.answer").show();
    });
    $("button.hide").bind("click", function(e) {
     $("div.answer").hide();
    });
});

Answer 1

You're missing a space:

$("div#flashcard-001 .answer").hide();

Answer 2

The outer most div has a full selector of:

div#flaschard-001.flashcard

not:

div#flashcard-001.answer

I believe you are simply using the wrong selector.

Answer 3

try:

$("#flashcard-001").children(".answer").hide();

Answer 4

Since you want to select a descendant of the DIV element with the ID flashcard-001, you need the descendant selector or – since your element is also a direct child – the child selector:

div#flashcard-001 .answer
div#flashcard-001 > .answer