How to override the value of a CSS variable inside a container query

At the :root level a CSS variable is declared with a value. This variable is used to style elements.

Inside a container query a new value is assigned to the variable. The styled elements should change to reflect that new value.

This code should change the width of a box when the html element is 40 characters wide. It contains a container query, which does not work, and a media query that does:

:root {
  --box-w: 10ch;
}

html {
  container: html / size;
}

.box {
  background-color: #fc3;
  height: 3ex;
  width: var(--box-w);
}

@container html (min-width: 40ch) {
   :root {
    --box-w: 30ch;
  }
  .box {
    border: 1ch dotted #c00;
  }
}

@media (min-width: 50ch) {
   :root {
    --box-w: 40ch;
  }
  .box {
    border: 1ch solid #0c0;
  }
}

<div class="box"></div>

The box should be 30 characters wide when the screen is 40 characters wide. That does not happen. The rule is applied since the border changes to red dots, so I think the condition is correct.

The similar syntax does work with a media query.

The media query cannot be used because it uses the default browser font and size, not the actual font and its size set with CSS.

>Solution :

Try this:

@container html (min-width: 40ch) {
    * {
        --box-w: 30ch;
    }

    .box {
        border: 1ch dotted #c00;
    }
}

I believe it does not work, because you are targeting :root with html.