title: JavaFX: Apply text color to TableCell using custom style sheet?
body: <p>JavaFX: <strong>How can I apply text color to a TableCell using a custom style sheet?</strong></p>
  
  <p>It works fine, when I use <code>setTextFill()</code> in my CellFactory directly, but I want to apply custom style using an external CSS file. I could prove that my CSS class is applied, since the font becomes bold. The CSS file's font color, however, is not applied.</p>
  
  <pre><code>@Override
  protected void updateItem(MyObject item, boolean empty) {
      super.updateItem(item, empty);
  
      if (null != item) {        
          // EITHER:
          this.getStyleClass().add("styleImportant"); // Does NOT set color.
  
          // OR:
          this.setTextFill(Color.RED); // Does set color.
      }
      else {
          this.getStyleClass().remove("styleImportant");
      }
  
  }
  </code></pre>
  
  <p>Style sheet:</p>
  
  <pre><code>.styleImportant {
      -fx-font-weight: bold; /** Does work. */
      -fx-text-fill: red; /** Does NOT work. */
  }
  </code></pre>
  
  <p>It is somehow related to specificity of CSS selectors, but I did not manage to find any valid setup.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> I managed to apply both, a custom text color and background color, using CSS. My implementation now uses a <code>Label</code> that is wrapped in a <code>VBox</code> to make the background color fill the entire table cell. However, I still had some issues with background color not being cleared when removing the custom style.</p>
  
  <p><strong>Is there any better solution than applying a <em>clear style</em>?</strong></p>
  
  <pre><code>colExample.setCellFactory(new Callback&lt;TableColumn&lt;Example, Example&gt;, TableCell&lt;Example, Example&gt;&gt;() {
    @Override
    public TableCell&lt;Example, Example&gt; call(TableColumn&lt;Example, Example&gt; tableColumn) {
       return new TableCell&lt;Example, Example&gt;() {
          private VBox container;
          private Label text;
  
          // Anonymous constructor
          {
             this.container = new VBox();
             this.text = this.createLabel();
  
             this.container.getChildren().add(this.text);
             this.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
             this.setStyle("-fx-padding: -1 -1 -1 -1;"); // Remove padding from cell
  
             this.setGraphic(this.container);
          }
  
          private final Label createLabel() {
             Label label = new Label();
  
             VBox.setVgrow(label, Priority.ALWAYS);
             label.setMaxWidth(Double.MAX_VALUE);
             label.setMaxHeight(Double.MAX_VALUE);
             label.setAlignment(Pos.CENTER);
  
             return label;
          }
  
          @Override
          protected void updateItem(Example example, boolean empty) {
             super.updateItem(example, empty);
  
             // Reset column styles
             if (null != this.text &amp;&amp; null != this.text.getStyleClass()) {
                String[] possibleStyles = new String[] { "styleImportant", "clearStyle" };
  
                for (String style: possibleStyles) {
                   if (this.text.getStyleClass().contains(style)) {
                      // Will not reset background, even though style is removed?
                      this.text.getStyleClass().remove(style);
                   }
                }
  
                // Apply reset style to clear background color
                this.text.getStyleClass().add("clearStyle");
             }
  
             if (null != example) {
                this.text.setText(example.getContent());
  
                if (example.isImportant()) {
                   this.text.getStyleClass().add("styleImportant");
                }
             }
          }
       };
    }
  });
  </code></pre>
  
  <p>My style sheet:</p>
  
  <pre><code>/** Keep black text color, when user selects row */
  .table-row-cell:focused {
     -fx-dark-text-color: #000000;
     -fx-mid-text-color: #000000;
     -fx-light-text-color: #000000;
  }
  
  /** Style to reset background color */
  .clearStyle {
     -fx-background-color: transparent;
  }
  
  /** Style for important cells */
  .styleImportant {
     /** Red text color on any background */
     -fx-dark-text-color: #FF0000;
     -fx-mid-text-color: #FF0000;
     -fx-light-text-color: #FF0000;
  
     -fx-background-color: #FF9999;
  }
  </code></pre>