title: how to style gtk widgets individually with css code
body: <p>After this <a href="https://stackoverflow.com/questions/47083294/gtk-change-font-to-spin-button">GTK+ change font to spin button</a> and this <a href="https://stackoverflow.com/questions/47114306/how-to-apply-css-to-gtk-code">how to apply CSS to GTK+ code?</a> question, I started understanding how to apply a css style to a GTK code, yet there are still a lot confusing details.</p>
  
  <p>This is the code with which I create two buttons and three labels:</p>
  
  <p><strong>test.c</strong> </p>
  
  <pre><code>#include &lt;gtk/gtk.h&gt;
  #include &lt;string.h&gt;  
  
  static void
  activate (GtkApplication *app,
            gpointer        user_data)
  {
  
    GtkWidget *window = gtk_application_window_new (app);;
    GtkWidget *button_01 = gtk_button_new_with_label("This is button 01");
    GtkWidget *button_02 = gtk_button_new_with_label("This is button 02");
    GtkWidget *label0 = gtk_label_new("hello 0");
    GtkWidget *label1 = gtk_label_new("hello 1");
    GtkWidget *label2 = gtk_label_new("hello 2");
    GtkWidget * main_box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 25);
  
    GtkCssProvider *cssProvider = gtk_css_provider_new();
    gtk_css_provider_load_from_path(cssProvider, "theme.css", NULL);
    gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
                                 GTK_STYLE_PROVIDER(cssProvider),
                                 GTK_STYLE_PROVIDER_PRIORITY_USER);
  
    gtk_box_set_homogeneous (GTK_BOX (main_box), TRUE);
    gtk_container_add (GTK_CONTAINER (window), main_box);
    gtk_container_add (GTK_CONTAINER (main_box), button_01);
    gtk_container_add (GTK_CONTAINER (main_box), label0);
    gtk_container_add (GTK_CONTAINER (main_box), label1);
    gtk_container_add (GTK_CONTAINER (main_box), label2);
    gtk_container_add (GTK_CONTAINER (main_box), button_02);
  
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all (window);
  }
  
  int
  main (int    argc,
        char **argv)
  {
    GtkApplication *app;
    int status;
  
    app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
    g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
    status = g_application_run (G_APPLICATION (app), argc, argv);
    g_object_unref (app);
  
    return status;
  }
  </code></pre>
  
  <p>and this is the css file:</p>
  
  <p><strong>theme.css</strong></p>
  
  <pre><code>GtkWindow {
      font: Comic Sans 12
  }
  
  .button {
    color: green;
  }
  </code></pre>
  
  <p>The code works fine, because all fonts are changed and all buttons are red. What I want to do is to style each widget individually, <strong>for example to make the label0 appear red, the label1 appear green and the label 2 appear blue.</strong></p>
  
  <p>According to these examples <a href="https://developer.gnome.org/gtk3/stable/chap-css-overview.html" rel="noreferrer">https://developer.gnome.org/gtk3/stable/chap-css-overview.html</a> , something something this should do the trick:</p>
  
  <pre><code>label#label0 {
    color: red;
  }
  label#label1 {
    color: green;
  }
  label#label2 {
    color: blue;
  }
  </code></pre>
  
  <p>but apparently it doesn't which means that I miss something there. </p>
  
  <p>Any help about <strong>how to style widgets individually with css code</strong> would be appreciated. </p>