Styling of a chip (with nth-child(X)$ selectors) affects the other chips sometimes (rarely)

[akcasoy]

My Home Assistant version: 2024.10.1

card_mod Version: v3.4.3

My lovelace configuration method (GUI or yaml): yaml

What I am doing: Styling custom_fields in a custom:button-card. In custom fields i have a custom:mushroom-chips-card which has multiple chips of types template and conditional.

What I expected to happen: I have separate stylings for each chip. Each chip can be styled independent of another with these nth-child(X)$ selectors:

      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$: |
            ha-state-icon {
              --chip-icon-size: 26px;
              --color: {{ 'rgba(39, 245, 234, 1)' if is_state('input_boolean.gaste_ubernachten', 'on') else 'rgba(111, 111, 111, 1)' }};
            }
          mushroom-template-chip:nth-child(2)$: |
            ha-state-icon {
              --chip-icon-size: 26px;
              --color: {{ 'rgba(255, 152, 0, 1)' if is_state('light.shelly1minig3_5432045f1bec_switch_0', 'on') else 'rgba(111, 111, 111, 1)' }};
            }  
           ...

What happened instead: Just sometimes (randomly), styling of a chip affects the other chip.

Here you can see the problem:

(Third chip from type conditional -with shutter icon- has its own icon color definiton (always the same color) --color: {{ 'rgba(111, 111, 111, 1)' }}, but still gets the color of the first chip when the first chips state is on).

Bildschirmaufnahme.2024-10-13.um.13.35.09.mov

Minimal steps to reproduce: Randomly. I cannot reproduce the bug always.

# The least amount of code possible to reproduce my error (since i cannot always produce the error, i have to paste the whole card code. I do not know which part of the card causes this error)
type: custom:button-card
layout_options:
  grid_columns: 2
name: Gäste
icon: mdi:bed
entity: input_button.popup_card_opener_gastezimmer
state_display: |
  [[[
    var temp = states['sensor.gastezimmer_heizung_gruppe_int0000003_temperatur'].state;
    var humidity = states['sensor.gastezimmer_heizung_gruppe_int0000003_luftfeuchtigkeit'].state;
    return temp + ' °C \xa0\xa0\ ' + humidity + '%';
  ]]]
custom_fields:
  trend: |
    [[[
      var trend = states['binary_sensor.gastezimmer_temp_trend'].state;
      if (trend == 'on') {
        return `<ha-icon
        icon="mdi:arrow-up-thin"
        style="width: 30px; height: 30px; color: rgb(230, 44, 0);">
        </ha-icon>` 
      } else {
        return `<ha-icon
        icon="mdi:arrow-down-thin"
        style="width: 30px; height: 30px; color: rgb(59, 98, 120);">
        </ha-icon>` 
      }
    ]]]
  btn:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          icon: mdi:bed-outline
          entity: input_boolean.gaste_ubernachten
          card_mod:
            style: |
              ha-card {
                height: 40px !important;
                width: 40px !important;
                justify-content: center;
                border-radius: 100px !important;
                --chip-background: {{ 'rgba(39, 245, 234, 0.2)' if is_state('input_boolean.gaste_ubernachten', 'on') else 'rgba(111, 111, 111, 0.2)' }};
              }
        - type: template
          icon: mdi:vanity-light
          entity: light.shelly1minig3_5432045f1bec_switch_0
          card_mod:
            style: |
              ha-card {
                height: 40px !important;
                width: 40px !important;
                justify-content: center;
                border-radius: 100px !important;
                --chip-background: {{ 'rgba(255, 152, 0, 0.2)' if is_state('light.shelly1minig3_5432045f1bec_switch_0', 'on') else 'rgba(111, 111, 111, 0.2)' }};
              }
        - type: conditional
          conditions:
            - condition: state
              entity: cover.gastezimmer_rolladenaktor
              state_not: open
          chip:
            type: template
            icon: mdi:window-shutter
            entity: cover.gastezimmer_rolladenaktor
            tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  cursor: default;
                  height: 40px !important;
                  width: 40px !important;
                  justify-content: center;
                  border-radius: 100px !important;
                  --chip-background: {{'rgba(111, 111, 111, 0.2)'}};
                }     
        - type: conditional
          conditions:
            - condition: state
              entity: binary_sensor.gastezimmer_fensterkontakt
              state: "on"
          chip:
            type: template
            icon: mdi:window-open-variant
            entity: binary_sensor.gastezimmer_fensterkontakt
            tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  cursor: default;
                  height: 40px !important;
                  width: 40px !important;
                  justify-content: center;
                  border-radius: 100px !important;
                  --chip-background: rgba(101, 183, 65, 0.3);
                }
        - type: conditional
          conditions:
            - condition: state
              entity: sensor.gastezimmer_heizung_gruppe_int0000003_ventil_offnungsgrad
              state_not: "0.0"
          chip:
            type: template
            icon: mdi:fire
            entity: sensor.gastezimmer_heizung_gruppe_int0000003_ventil_offnungsgrad
            tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  cursor: default;
                  height: 40px !important;
                  width: 40px !important;
                  justify-content: center;
                  border-radius: 100px !important;
                  --chip-background: rgba(231, 41, 41, 0.2);
                } 
        - type: conditional
          conditions:
            - condition: numeric_state
              entity: sensor.gastezimmer_heizung_gruppe_int0000003_luftfeuchtigkeit
              above: 60
          chip:
            type: template
            icon: mdi:water-percent-alert
            entity: sensor.gastezimmer_heizung_gruppe_int0000003_luftfeuchtigkeit
            tap_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  animation: ping 2s infinite;
                  cursor: default;
                  height: 40px !important;
                  width: 40px !important;
                  justify-content: center;
                  border-radius: 100px !important;
                  --chip-background: rgba(0, 141, 218, 0.3);
                } 
                @keyframes ping {
                  0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
                  70% {box-shadow: 0 0 0 15px transparent;}
                  100% {box-shadow: 0 0 0 0 transparent;}
                }
      card_mod:
        style:
          mushroom-template-chip:nth-child(1)$: |
            ha-state-icon {
              --chip-icon-size: 26px;
              --color: {{ 'rgba(39, 245, 234, 1)' if is_state('input_boolean.gaste_ubernachten', 'on') else 'rgba(111, 111, 111, 1)' }};
            }
          mushroom-template-chip:nth-child(2)$: |
            ha-state-icon {
              --chip-icon-size: 26px;
              --color: {{ 'rgba(255, 152, 0, 1)' if is_state('light.shelly1minig3_5432045f1bec_switch_0', 'on') else 'rgba(111, 111, 111, 1)' }};
            }   
          mushroom-conditional-chip:nth-child(3):
            mushroom-template-chip$: |
              ha-state-icon {
                --chip-icon-size: 28px;
                --color: {{ 'rgba(111, 111, 111, 1)' }};
              }  
          mushroom-conditional-chip:nth-child(4):
            mushroom-template-chip$: |
              ha-state-icon {
                --chip-icon-size: 24px;
                --color: rgb(101, 183, 65);
                animation: shake 400ms ease-in-out infinite;
              }
              @keyframes shake {
                0%, 100% { transform: rotate(6deg); }
                50%  { transform: rotate(-6deg); }
              }
          mushroom-conditional-chip:nth-child(5):
            mushroom-template-chip$: |
              ha-state-icon {
                --chip-icon-size: 28px;
                --color: rgb(231, 41, 41);
                animation: fire 1.5s infinite;
                transform-origin: 100% 85%;
              }
              @keyframes fire {
                0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
              }
          mushroom-conditional-chip:nth-child(6):
            mushroom-template-chip$: |
              ha-state-icon {
                --chip-icon-size: 28px;
                --color: rgb(0, 141, 218);
              }
styles:
  grid:
    - grid-template-areas: "\"i n trend\" \"i s trend\" \"btn btn btn\""
    - grid-template-columns: 0.8fr 1.7fr min-content;
    - grid-template-rows: min-content min-content 1.5fr;
    - gap: 0px 10px;
  card:
    - padding: 10px 5px 7px 5px
  custom_fields:
    btn:
      - display: grid
      - justify-content: end
      - margin-top: 15px
  name:
    - justify-self: start
    - font-size: 14px
    - font-weight: 500
    - margin-left: 5px
  state:
    - justify-self: start
    - font-size: 14px
    - opacity: "0.7"
    - margin-left: 5px
  img_cell:
    - position: absolute
    - top: "-20px"
    - left: "-20px"
    - width: 70px
    - height: 70px
    - background: |
        [[[
          var temp = states['sensor.gastezimmer_heizung_gruppe_int0000003_temperatur'].state;

          if (temp < 20) return 'rgb(255, 236, 232)';
          else if (temp < 21) return 'rgb(255, 199, 185)';
          else if (temp < 22) return 'rgb(255, 161, 139)';
          else if (temp < 23) return 'rgb(255, 124, 93)';
          else if (temp < 24) return 'rgb(255, 86, 46)';
          else return 'rgb(255, 49, 0)';
        ]]]
    - border-radius: 500px
  icon:
    - width: 40px
    - color: black
    - margin-left: 22px
    - margin-top: 6px
    - opacity: "0.5"
show_state: true

# End of code

Error messages from the browser console: No console errors.

---

By putting an X in the boxes ([]) below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.