Trying to understand why :nth-child() offsets changed.

[greenbus4]

After some recent HA update it seems my :nth-child() selectors changed by one offset.

To select the first ha-chip-assist element I had to change my :nth-child(1) to :nth-child(2) and I'm curious why. What is :nth-child(1) referencing now?

I'm highlighted on (what I think) is the first ha-chip-assist of three, and you can see on the right it's selecting for :nth-child(2):

Here's the card:

It seems like it should be using ha-assist-chip:nth-child(1) to select that first (selected) element. I'm concerned if I just blindly make it select child(2) it's going to break in the future.

[ngocjohn]

You can use nth-child(0n+1) for the first element in a group of siblings or :first-child

[dcapslock]

uix-node itself is first as it will prepend when needed to mitigate getting removed by Lit.

You can also use nth-child(1 of ha-assist-chip)

[greenbus4]

Perhaps I'm not following or maybe (well not maybe) my CSS skills are lacking, but doesn't ha-chip-assist:nth-child(n) say select the nth ha-chip-assist element? How would it select the uix-node which is a totally different element?

When this stopped working I was using card-mod and then moved over to uix this morning to work on fixing it. Now I'm wondering how it worked before -- or what changed.

Edit: Oh, it is my lack of CSS skill. ha-assist-chip:nth-of-type(1) is what I probably want. Still confused why it broke, but maybe a somewhat recent update added another element?

Thanks!

[dcapslock]

Check out the MDN on nth-child

Note: In the element:nth-child() syntax, the child count includes sibling children of any element type; but it is considered a match only if the element at that child position matches the other components of the selector.

Anyhow, should have mentioned that you can now target chips directly.

e.g.

header:
  type: buttons
  entities:
    - light.bed_light
    - entity: light.ceiling_lights
      uix:
        style: |
          :host {
            background-color: yellow;
          }

[greenbus4]

    - entity: light.ceiling_lights
      uix:
        style: |
          :host {
            background-color: yellow;
          }

That's cleaner. Thanks.

And that style is placed inside the shadow DOM of that specific element (ha-assist-chip) and then :host says to apply it to the parent of the shadow DOM (thus the ha-assist-chip). I'm slowly getting it...

Unlike the other approach, seems I have to then use display: none !important; to override display, too.

[dcapslock]

and then :host says to apply it to the parent of the shadow DOM (thus the ha-assist-chip). I'm slowly getting it...

Yes, though technically the shadow root's host as the shadow root is a document fragment that does not have a parent element as such.

Unlike the other approach, seems I have to then use display: none !important; to override display, too.

Depends on specificity of the CSS selector. If you use say :host(.type-assist-chip) this should be enough to increase specificity to (0,2,0) which will override the included style :host selector which will have specificity of (0,1,0). Some Browsers can still be quirky so you may need to include !important.