title: How to properly handle focus of children in JavaFX?
body: <p>I'm having a problem handling the focus of a child <code>Node</code>. I have this custom layout with a bunch of nodes in its hierarchy, and I'd like to make one of its children (specifically, a <code>Pane</code>) to be <code>focusTraversable</code> or can obtain focus on mouse pressed (like a button control). What I really want to do is simply change the background color of the child when focused, here's my code:</p>
  
  <pre><code>Pane pane = new Pane();
  pane.getStyleClass().setAll("container");
  pane.setFocusTraversable(true);
  pane.setOnMousePressed(event -&gt; {
    if (!pane.isFocused() &amp;&amp; pane.isFocusTraversable()) {
      pane.requestFocus();
      // Test if this node is currently focused
      System.out.println(pane.isFocused());
    }
  });
  </code></pre>
  
  <p>CSS changes the <code>-fx-background-color</code> of the pane:</p>
  
  <pre><code>.container {
    -fx-background-color: red;
  }
  .container:focused {
    -fx-background-color: blue;
  }
  </code></pre>
  
  <p>Although it appears that the node is focused when traversing using <code>TAB</code> key, the background does not change at all when it is pressed. So, what was the proper way of handling focus of children?</p>