I have created a CSS global variable (–debug) and an @container.

As I understand it, the @container will normally contain styles for elements based on the condition.

I (mistakenly?) put the @container inside each style element rule instead of the style elements inside the @container.

It works! But why…? I don’t quite understand, based on everything I can find about @container.
I am using Chrome Version 128.0.6613.138 (Official Build) (64-bit).

My stylesheet contains the following :

:root
{
   container-name: debug;
    --debug: false;
}

.DIV-RED
{
    width:200px;
height:200px;
background-color:red;
display:inline-block;

     @container debug style(--debug:true) 
{
    background-color:blue;
}

}

changing the –debug variable to true (which I normally do programmatically) works, the DIV changes to a background-color of blue.

But notice my @container INSIDE the .DIV-RED rule. I have only seen it in my research the other way … (below)

.DIV-RED
{
    width:200px;
height:200px;
background-color:red;
display:inline-block;

    

}
@container debug style(--debug:true) 
{
    .DIV-RED
{
    background-color:blue;
}
}

which also works !

Is this a bug in @container that I can use it inside a CSS rule as I am?

As above…I’ve tried it both ways, both ways seem to work identically. I just don’t quite understand why.