title: Using fx:id as CSS id in FXML
body: <p>It seems that in FXML if you don't specify a ID (CSS) then the fx:id value is used by default. My previous understanding was the two were completely disjoint, ID for CSS and only CSS. fx:id for @FXML bindings in the controller.</p>
  
  <p>This can be demonstrated with a small test - three buttons, first with ID, second with FX:ID, third with both types of ID.</p>
  
  <pre><code>&lt;VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"&gt;
     &lt;children&gt;
        &lt;Button id="cssid0" mnemonicParsing="false" text="Button" /&gt;
        &lt;Button fx:id="fxid1" mnemonicParsing="false" text="Button" /&gt;
        &lt;Button id="cssid2" fx:id="fxid2" mnemonicParsing="false" text="Button" /&gt;
     &lt;/children&gt;
  &lt;/VBox&gt;
  </code></pre>
  
  <p>Using Node.lookup(cssSelector) allows selection by fx:id</p>
  
  <pre><code>@Override
  public void start(Stage stage) throws Exception {
      FXMLLoader loader = new FXMLLoader(getClass().getResource("/foo.fxml"));
      Parent p = loader.load();
  
      System.out.println(p.lookup("#cssid0")); // =&gt; Button[id=cssid0, styleClass=button]'Button'
      System.out.println(p.lookup("#fxid1"));  // =&gt; Button[id=fxid1, styleClass=button]'Button'
  
      System.out.println(p.lookup("#fxid2"));  // =&gt; null (if there is a CSS ID it takes precedent)
      System.out.println(p.lookup("#cssid2")); // Button[id=cssid2, styleClass=button]'Button'
  
      stage.setScene(new Scene(p, 200, 200));
      stage.getScene().getStylesheets().add("/foo.css");
      stage.show();
  }
  </code></pre>
  
  <p>Also CSS allows selection by the fx:ID</p>
  
  <pre><code>#cssid0 {
      -fx-color: red;
  }
  #fxid1 {
      -fx-color: green;
  }
  #cssid2 {
      -fx-color: blue;
  }
  </code></pre>
  
  <p>This does not appear to be covered by existing question <a href="https://stackoverflow.com/questions/23686325/whats-the-difference-between-fxid-and-id-in-javafx">What&#39;s the difference between fx:id and id: in JavaFX?</a>, Javadoc for <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/Node.html#getId--" rel="nofollow noreferrer">Node.getId()</a> or anywhere else I could find.</p>
  
  <p>This feature is really useful as we only need to only specify a single fx:id which can be used for controllers, CSS and unit testing using test-FX. </p>
  
  <p>Is it OK to use this approach or am I building assumptions on undocumented behaviour that might change in a later release? Or is it documented somewhere I'm missing?</p>