Does nested CSS have lower specificity?

[davep]

Consider this code:

from textual.app import App, ComposeResult
from textual.widgets import Static

class BaseTester(Static, can_focus=True):
    DEFAULT_CSS = """
    BaseTester:focus {
        background: yellow;
        border: thick magenta;
    }
    """

class NonNestedCSS(BaseTester):
    DEFAULT_CSS = """
    NonNestedCSS {
        width: 1fr;
        height: 1fr;
        background: red 10%;
        border: blank;
    }

    NonNestedCSS:focus {
        background: red 20%;
        border: round red;
    }
    """

class NestedCSS(BaseTester):
    DEFAULT_CSS = """
    NestedCSS {
        width: 1fr;
        height: 1fr;
        background: green 10%;
        border: blank;

        &:focus {
            background: green 20%;
            border: round green;
        }
    }
    """

class NestedPseudoClassesApp(App[None]):

    CSS = """
    Screen {
        layout: horizontal;
    }
    """

    def compose(self) -> ComposeResult:
        yield NonNestedCSS("This isn't using nested CSS")
        yield NestedCSS("This is using nested CSS")

if __name__ == "__main__":
    NestedPseudoClassesApp().run()

There is a base class with a :focus pseudo class that sets a garish border/background combination. There are then two subclassed widgets. One (NonNestedCSS) overrides the garish :focus with something nicer using a non-nested CSS approach. There is another (NestedCSS) which overrides the garish :focus using nested CSS. When the above code is run with 0.47.0 you'll see that NonNestedCSS overrides the :focus rules just fine; on the other hand the :focus rules for NestedCSS seem to be ignored.

It feels like there should be no difference here. Initially flagging this up as something to clarify, but perhaps also a bug.

Tagging @willmcgugan for triage as it relates to a new feature.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.