title: How to change the style of components by their attributes?
body: <p>I want to display different labels in javafx and i want to style them depending on their text. I added a css file and set the class of the Labels. I then checkd the fxml and found out that the text is saved in the text attribute.</p>
  
  <p>I looked into normal css and found out that you can there change the style by the attributes. You need to use [] for this. I tried this in my code and it didnt work. </p>
  
  <p>My Code: 
  FXML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.net.URL?&gt;
  &lt;?import javafx.scene.control.Label?&gt;
  &lt;?import javafx.scene.layout.HBox?&gt;
  
  &lt;HBox xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1"
        fx:controller="controller"&gt;
      &lt;stylesheets&gt;
          &lt;URL value="@../css/loadingScreen.css"/&gt;
      &lt;/stylesheets&gt;
      &lt;Label styleClass="field" text="1" /&gt;
      &lt;Label styleClass="field" text="2" /&gt;
      &lt;Label styleClass="field" text="3" /&gt;
  &lt;/HBox&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.field {
      -fx-text-alignment: center;
      -fx-pref-height: 64px;
      -fx-min-width: 64px;
      -fx-pref-width: 64px;
      -fx-min-height: 64px;
      -fx-background-color: blue;
  }
  
  .field[text="1"]{
      -fx-background-color: red;
  }
  
  .field[text="2"]{
      -fx-background-color: yellow;
  }
  
  .field[text="3"]{
      -fx-background-color: green;
  }
  </code></pre>
  
  <p>i tried the same with normal css and html and it worked there.
  HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .field[text="1"]{
      background-color: red;
  }
  
  .field[text="2"]{
      background-color: yellow;
  }
  
  .field[text="3"]{
      background-color: green;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="field" text="1" &gt;1&lt;/div&gt;
  &lt;div class="field" text="2" &gt;2&lt;/div&gt;
  &lt;div class="field" text="3" &gt;3&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What do i have to do to make this work in fxml?</p>