Titelleiste color nicht alle Buttons gleiche Farbe

  • Was ist der Unterschied zwischen

    CSS
    #TabsToolbar .toolbarbutton-1 {
       > .toolbarbutton-icon {
        fill: white !important;
      }
    }

    und

    CSS
    #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
        fill: white !important;
    }

    ?

    Es gibt keinen Unterschied. Das läuft auf exakt das Gleiche hinaus. Der Vorteil der Verschachtelung in diesem Beispiel ist lediglich, dass du darin noch weitere Dinge schreiben kannst, ohne den äußeren Selektor jedes Mal wiederholen zu müssen. Um dein Beispiel mit einem fiktiven Selektor zu erweitern, den es so in Firefox nicht gibt, nur um zu zeigen, was ich meine:

    CSS
    #TabsToolbar .toolbarbutton-1 {
      > .toolbarbutton-icon {
        fill: white !important;
      }
      
      .foo {
        fill: red !important;
      }
    }

    Als Alternative zu:

    CSS
    #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
      fill: white !important;
    }
    
    #TabsToolbar .toolbarbutton-1 .foo {
      fill: red !important;
    }

    Bei so kurzen Beispielen fällt das weniger ins Gewicht. Aber je mehr Code du hast, desto praktischer ist die Verschachtelung, weil es erstens übersichtlicher ist, da es die Struktur darstellt, und zweitens bei Änderungen eines (Teil-) Selektors weniger Stellen angepasst werden müssen.

  • Es gibt keinen Unterschied. Das läuft auf exakt das Gleiche hinaus. Der Vorteil der Verschachtelung ist lediglich, dass du darin noch weitere Dinge schreiben kannst, ohne den äußeren Selektor jedes Mal wiederholen zu müssen. Um dein Beispiel mit einem fiktiven Selektor zu erweitern, den es so in Firefox nicht gibt, nur um zu zeigen, was ich meine:

    CSS
    #TabsToolbar .toolbarbutton-1 {
      > .toolbarbutton-icon {
        fill: white !important;
      }
      
      .foo {
        fill: red !important;
      }
    }

    Als Alternative zu:

    CSS
    #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon {
      fill: white !important;
    }
    
    #TabsToolbar .toolbarbutton-1 .foo {
      fill: red !important;
    }

    Bei so kurzen Beispielen fällt das weniger ins Gewicht. Aber je mehr Code du hast, desto praktischer ist die Verschachtelung, weil es erstens übersichtlicher ist, da es die Struktur darstellt, und zweitens bei Änderungen eines (Teil-) Selektors weniger Stellen angepasst werden müssen.

    Perfekt, danke! Da lerne ich zufällig etwas, nach dem ich schon ab und zu gesucht habe.