We are currently solving the following issue within our repository. Here is the issue text:
--- BEGIN ISSUE ---
Footer widget footer--description css selector not working
Have you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed
yes

Please give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. **Check it can run without modifications.**

This is my first issue submitted and I'm new to Textual so this could be user error. I'm trying to style a footer widget with CSS. I have successfully used the footer--highlight, footer--highlight-key and footer--key component classes to style the footer, but the footer--description class doesn't seem to do anything and the default css from the Footer class is used. Shouldn't footer--description override Footer in my example below? I would expect the "Quit" text to start off with a purple background. Thanks!

```
from textual.app import App, ComposeResult
from textual.widgets import Footer


class App(App):

    CSS = """
        Footer .footer--description {
          background: purple;
        }
        
        Footer .footer--highlight {
          background: red;
        }
        
        Footer .footer--highlight-key {
          background: blue;
        }
        
        Footer .footer--key {
          background: green;
        }
    """

    BINDINGS = [
        ("q", "quit", "Quit"),
    ]

    def compose(self) -> ComposeResult:
        yield Footer()


if __name__ == "__main__":
    app = App()
    app.run()
```


It will be helpful if you run the following command and paste the results:

```
textual diagnose
```

# Textual Diagnostics

## Versions

| Name    | Value  |
|---------|--------|
| Textual | 0.24.1 |
| Rich    | 13.3.5 |

## Python

| Name           | Value                                                  |
|----------------|--------------------------------------------------------|
| Version        | 3.11.0                                                 |
| Implementation | CPython                                                |
| Compiler       | Clang 14.0.0 (clang-1400.0.29.102)                     |
| Executable     | /Users/Tom/Projects/Python/PythonDemos/venv/bin/python |

## Operating System

| Name    | Value                                                                                            |
|---------|--------------------------------------------------------------------------------------------------|
| System  | Darwin                                                                                           |
| Release | 22.4.0                                                                                           |
| Version | Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64 |

## Terminal

| Name                 | Value       |
|----------------------|-------------|
| Terminal Application | Kitty       |
| TERM                 | xterm-kitty |
| COLORTERM            | truecolor   |
| FORCE_COLOR          | *Not set*   |
| NO_COLOR             | *Not set*   |

## Rich Console options

| Name           | Value                |
|----------------|----------------------|
| size           | width=192, height=45 |
| legacy_windows | False                |
| min_width      | 1                    |
| max_width      | 192                  |
| is_terminal    | True                 |
| encoding       | utf-8                |
| max_height     | 45                   |
| justify        | None                 |
| overflow       | None                 |
| no_wrap        | False                |
| highlight      | None                 |
| markup         | None                 |
| height         | None                 |


Feel free to add screenshots and / or videos. These can be very helpful!


--- END ISSUE ---

Below are some code segments, each from a relevant file. One or more of these files may contain bugs.
--- BEGIN FILES ---
Path: `src/textual/widgets/_footer.py`
Content:
```
1 from __future__ import annotations
2 
3 from collections import defaultdict
4 from typing import ClassVar, Optional
5 
6 import rich.repr
7 from rich.console import RenderableType
8 from rich.text import Text
9 
10 from .. import events
11 from ..reactive import reactive
12 from ..widget import Widget
13 
14 
15 @rich.repr.auto
16 class Footer(Widget):
17     """A simple footer widget which docks itself to the bottom of the parent container."""
18 
19     COMPONENT_CLASSES: ClassVar[set[str]] = {
20         "footer--description",
21         "footer--key",
22         "footer--highlight",
23         "footer--highlight-key",
24     }
25     """
26     | Class | Description |
27     | :- | :- |
28     | `footer--description` | Targets the descriptions of the key bindings. |
29     | `footer--highlight` | Targets the highlighted key binding. |
30     | `footer--highlight-key` | Targets the key portion of the highlighted key binding. |
31     | `footer--key` | Targets the key portions of the key bindings. |
32     """
33 
34     DEFAULT_CSS = """
35     Footer {
36         background: $accent;
37         color: $text;
38         dock: bottom;
39         height: 1;
40     }
41     Footer > .footer--highlight {
42         background: $accent-darken-1;
43     }
44 
45     Footer > .footer--highlight-key {
46         background: $secondary;
47         text-style: bold;
48     }
49 
50     Footer > .footer--key {
51         text-style: bold;
52         background: $accent-darken-2;
53     }
54     """
55 
56     highlight_key: reactive[str | None] = reactive[Optional[str]](None)
57 
58     def __init__(self) -> None:
59         super().__init__()
60         self._key_text: Text | None = None
61         self.auto_links = False
62 
63     async def watch_highlight_key(self) -> None:
64         """If highlight key changes we need to regenerate the text."""
65         self._key_text = None
66         self.refresh()
67 
68     def _on_mount(self, _: events.Mount) -> None:
69         self.watch(self.screen, "focused", self._bindings_changed)
70         self.watch(self.screen, "stack_updates", self._bindings_changed)
71 
72     def _bindings_changed(self, _: Widget | None) -> None:
73         self._key_text = None
74         self.refresh()
75 
76     def _on_mouse_move(self, event: events.MouseMove) -> None:
77         """Store any key we are moving over."""
78         self.highlight_key = event.style.meta.get("key")
79 
80     def _on_leave(self, _: events.Leave) -> None:
81         """Clear any highlight when the mouse leaves the widget"""
82         if self.screen.is_current:
83             self.highlight_key = None
84 
85     def __rich_repr__(self) -> rich.repr.Result:
86         yield from super().__rich_repr__()
87 
88     def _make_key_text(self) -> Text:
89         """Create text containing all the keys."""
90         base_style = self.rich_style
91         text = Text(
92             style=self.rich_style,
93             no_wrap=True,
94             overflow="ellipsis",
95             justify="left",
96             end="",
97         )
98         highlight_style = self.get_component_rich_style("footer--highlight")
99         highlight_key_style = self.get_component_rich_style("footer--highlight-key")
100         key_style = self.get_component_rich_style("footer--key")
101 
102         bindings = [
103             binding
104             for (_, binding) in self.app.namespace_bindings.values()
105             if binding.show
106         ]
107 
108         action_to_bindings = defaultdict(list)
109         for binding in bindings:
110             action_to_bindings[binding.action].append(binding)
111 
112         for _, bindings in action_to_bindings.items():
113             binding = bindings[0]
114             if binding.key_display is None:
115                 key_display = self.app.get_key_display(binding.key)
116                 if key_display is None:
117                     key_display = binding.key.upper()
118             else:
119                 key_display = binding.key_display
120             hovered = self.highlight_key == binding.key
121             key_text = Text.assemble(
122                 (f" {key_display} ", highlight_key_style if hovered else key_style),
123                 (
124                     f" {binding.description} ",
125                     highlight_style if hovered else base_style,
126                 ),
127                 meta={
128                     "@click": f"app.check_bindings('{binding.key}')",
129                     "key": binding.key,
130                 },
131             )
132             text.append_text(key_text)
133         return text
134 
135     def notify_style_update(self) -> None:
136         self._key_text = None
137 
138     def post_render(self, renderable):
139         return renderable
140 
141     def render(self) -> RenderableType:
142         if self._key_text is None:
143             self._key_text = self._make_key_text()
144         return self._key_text
145
```
--- END FILES ---

Please first localize the bug based on the issue statement, and then generate a patch according to the `git diff` format fenced by three backticks.

Here is an example:

```diff
diff --git a/examples/server_async.py b/examples/server_async.py
--- a/examples/server_async.py
+++ b/examples/server_async.py
@@ -313,4 +313,4 @@
 
 
 if __name__ == "__main__":
-    asyncio.run(run_async_server("."), debug=True)
+    asyncio.run(run_async_server(), debug=True)
diff --git a/examples/server_sync.py b/examples/server_sync.py
--- a/examples/server_sync.py
+++ b/examples/server_sync.py
@@ -313,5 +313,5 @@
 
 
 if __name__ == "__main__":
-    server = run_sync_server(".")
+    server = run_sync_server()
     server.shutdown()

```

diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py
--- a/src/textual/widgets/_footer.py
+++ b/src/textual/widgets/_footer.py
@@ -98,6 +98,7 @@
         highlight_style = self.get_component_rich_style("footer--highlight")
         highlight_key_style = self.get_component_rich_style("footer--highlight-key")
         key_style = self.get_component_rich_style("footer--key")
+        description_style = self.get_component_rich_style("footer--description")
 
         bindings = [
             binding
@@ -122,7 +123,7 @@
                 (f" {key_display} ", highlight_key_style if hovered else key_style),
                 (
                     f" {binding.description} ",
-                    highlight_style if hovered else base_style,
+                    highlight_style if hovered else base_style + description_style,
                 ),
                 meta={
                     "@click": f"app.check_bindings('{binding.key}')",

{"golden_diff": "diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py\n--- a/src/textual/widgets/_footer.py\n+++ b/src/textual/widgets/_footer.py\n@@ -98,6 +98,7 @@\n         highlight_style = self.get_component_rich_style(\"footer--highlight\")\n         highlight_key_style = self.get_component_rich_style(\"footer--highlight-key\")\n         key_style = self.get_component_rich_style(\"footer--key\")\n+        description_style = self.get_component_rich_style(\"footer--description\")\n \n         bindings = [\n             binding\n@@ -122,7 +123,7 @@\n                 (f\" {key_display} \", highlight_key_style if hovered else key_style),\n                 (\n                     f\" {binding.description} \",\n-                    highlight_style if hovered else base_style,\n+                    highlight_style if hovered else base_style + description_style,\n                 ),\n                 meta={\n                     \"@click\": f\"app.check_bindings('{binding.key}')\",\n", "issue": "Footer widget footer--description css selector not working\nHave you checked closed issues? https://github.com/Textualize/textual/issues?q=is%3Aissue+is%3Aclosed\r\nyes\r\n\r\nPlease give a brief but clear explanation of the issue. If you can, include a complete working example that demonstrates the bug. **Check it can run without modifications.**\r\n\r\nThis is my first issue submitted and I'm new to Textual so this could be user error. I'm trying to style a footer widget with CSS. I have successfully used the footer--highlight, footer--highlight-key and footer--key component classes to style the footer, but the footer--description class doesn't seem to do anything and the default css from the Footer class is used. Shouldn't footer--description override Footer in my example below? I would expect the \"Quit\" text to start off with a purple background. Thanks!\r\n\r\n```\r\nfrom textual.app import App, ComposeResult\r\nfrom textual.widgets import Footer\r\n\r\n\r\nclass App(App):\r\n\r\n    CSS = \"\"\"\r\n        Footer .footer--description {\r\n          background: purple;\r\n        }\r\n        \r\n        Footer .footer--highlight {\r\n          background: red;\r\n        }\r\n        \r\n        Footer .footer--highlight-key {\r\n          background: blue;\r\n        }\r\n        \r\n        Footer .footer--key {\r\n          background: green;\r\n        }\r\n    \"\"\"\r\n\r\n    BINDINGS = [\r\n        (\"q\", \"quit\", \"Quit\"),\r\n    ]\r\n\r\n    def compose(self) -> ComposeResult:\r\n        yield Footer()\r\n\r\n\r\nif __name__ == \"__main__\":\r\n    app = App()\r\n    app.run()\r\n```\r\n\r\n\r\nIt will be helpful if you run the following command and paste the results:\r\n\r\n```\r\ntextual diagnose\r\n```\r\n\r\n# Textual Diagnostics\r\n\r\n## Versions\r\n\r\n| Name    | Value  |\r\n|---------|--------|\r\n| Textual | 0.24.1 |\r\n| Rich    | 13.3.5 |\r\n\r\n## Python\r\n\r\n| Name           | Value                                                  |\r\n|----------------|--------------------------------------------------------|\r\n| Version        | 3.11.0                                                 |\r\n| Implementation | CPython                                                |\r\n| Compiler       | Clang 14.0.0 (clang-1400.0.29.102)                     |\r\n| Executable     | /Users/Tom/Projects/Python/PythonDemos/venv/bin/python |\r\n\r\n## Operating System\r\n\r\n| Name    | Value                                                                                            |\r\n|---------|--------------------------------------------------------------------------------------------------|\r\n| System  | Darwin                                                                                           |\r\n| Release | 22.4.0                                                                                           |\r\n| Version | Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64 |\r\n\r\n## Terminal\r\n\r\n| Name                 | Value       |\r\n|----------------------|-------------|\r\n| Terminal Application | Kitty       |\r\n| TERM                 | xterm-kitty |\r\n| COLORTERM            | truecolor   |\r\n| FORCE_COLOR          | *Not set*   |\r\n| NO_COLOR             | *Not set*   |\r\n\r\n## Rich Console options\r\n\r\n| Name           | Value                |\r\n|----------------|----------------------|\r\n| size           | width=192, height=45 |\r\n| legacy_windows | False                |\r\n| min_width      | 1                    |\r\n| max_width      | 192                  |\r\n| is_terminal    | True                 |\r\n| encoding       | utf-8                |\r\n| max_height     | 45                   |\r\n| justify        | None                 |\r\n| overflow       | None                 |\r\n| no_wrap        | False                |\r\n| highlight      | None                 |\r\n| markup         | None                 |\r\n| height         | None                 |\r\n\r\n\r\nFeel free to add screenshots and / or videos. These can be very helpful!\r\n\n", "before_files": [{"content": "from __future__ import annotations\n\nfrom collections import defaultdict\nfrom typing import ClassVar, Optional\n\nimport rich.repr\nfrom rich.console import RenderableType\nfrom rich.text import Text\n\nfrom .. import events\nfrom ..reactive import reactive\nfrom ..widget import Widget\n\n\n@rich.repr.auto\nclass Footer(Widget):\n    \"\"\"A simple footer widget which docks itself to the bottom of the parent container.\"\"\"\n\n    COMPONENT_CLASSES: ClassVar[set[str]] = {\n        \"footer--description\",\n        \"footer--key\",\n        \"footer--highlight\",\n        \"footer--highlight-key\",\n    }\n    \"\"\"\n    | Class | Description |\n    | :- | :- |\n    | `footer--description` | Targets the descriptions of the key bindings. |\n    | `footer--highlight` | Targets the highlighted key binding. |\n    | `footer--highlight-key` | Targets the key portion of the highlighted key binding. |\n    | `footer--key` | Targets the key portions of the key bindings. |\n    \"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        background: $accent;\n        color: $text;\n        dock: bottom;\n        height: 1;\n    }\n    Footer > .footer--highlight {\n        background: $accent-darken-1;\n    }\n\n    Footer > .footer--highlight-key {\n        background: $secondary;\n        text-style: bold;\n    }\n\n    Footer > .footer--key {\n        text-style: bold;\n        background: $accent-darken-2;\n    }\n    \"\"\"\n\n    highlight_key: reactive[str | None] = reactive[Optional[str]](None)\n\n    def __init__(self) -> None:\n        super().__init__()\n        self._key_text: Text | None = None\n        self.auto_links = False\n\n    async def watch_highlight_key(self) -> None:\n        \"\"\"If highlight key changes we need to regenerate the text.\"\"\"\n        self._key_text = None\n        self.refresh()\n\n    def _on_mount(self, _: events.Mount) -> None:\n        self.watch(self.screen, \"focused\", self._bindings_changed)\n        self.watch(self.screen, \"stack_updates\", self._bindings_changed)\n\n    def _bindings_changed(self, _: Widget | None) -> None:\n        self._key_text = None\n        self.refresh()\n\n    def _on_mouse_move(self, event: events.MouseMove) -> None:\n        \"\"\"Store any key we are moving over.\"\"\"\n        self.highlight_key = event.style.meta.get(\"key\")\n\n    def _on_leave(self, _: events.Leave) -> None:\n        \"\"\"Clear any highlight when the mouse leaves the widget\"\"\"\n        if self.screen.is_current:\n            self.highlight_key = None\n\n    def __rich_repr__(self) -> rich.repr.Result:\n        yield from super().__rich_repr__()\n\n    def _make_key_text(self) -> Text:\n        \"\"\"Create text containing all the keys.\"\"\"\n        base_style = self.rich_style\n        text = Text(\n            style=self.rich_style,\n            no_wrap=True,\n            overflow=\"ellipsis\",\n            justify=\"left\",\n            end=\"\",\n        )\n        highlight_style = self.get_component_rich_style(\"footer--highlight\")\n        highlight_key_style = self.get_component_rich_style(\"footer--highlight-key\")\n        key_style = self.get_component_rich_style(\"footer--key\")\n\n        bindings = [\n            binding\n            for (_, binding) in self.app.namespace_bindings.values()\n            if binding.show\n        ]\n\n        action_to_bindings = defaultdict(list)\n        for binding in bindings:\n            action_to_bindings[binding.action].append(binding)\n\n        for _, bindings in action_to_bindings.items():\n            binding = bindings[0]\n            if binding.key_display is None:\n                key_display = self.app.get_key_display(binding.key)\n                if key_display is None:\n                    key_display = binding.key.upper()\n            else:\n                key_display = binding.key_display\n            hovered = self.highlight_key == binding.key\n            key_text = Text.assemble(\n                (f\" {key_display} \", highlight_key_style if hovered else key_style),\n                (\n                    f\" {binding.description} \",\n                    highlight_style if hovered else base_style,\n                ),\n                meta={\n                    \"@click\": f\"app.check_bindings('{binding.key}')\",\n                    \"key\": binding.key,\n                },\n            )\n            text.append_text(key_text)\n        return text\n\n    def notify_style_update(self) -> None:\n        self._key_text = None\n\n    def post_render(self, renderable):\n        return renderable\n\n    def render(self) -> RenderableType:\n        if self._key_text is None:\n            self._key_text = self._make_key_text()\n        return self._key_text\n", "path": "src/textual/widgets/_footer.py"}], "after_files": [{"content": "from __future__ import annotations\n\nfrom collections import defaultdict\nfrom typing import ClassVar, Optional\n\nimport rich.repr\nfrom rich.console import RenderableType\nfrom rich.text import Text\n\nfrom .. import events\nfrom ..reactive import reactive\nfrom ..widget import Widget\n\n\n@rich.repr.auto\nclass Footer(Widget):\n    \"\"\"A simple footer widget which docks itself to the bottom of the parent container.\"\"\"\n\n    COMPONENT_CLASSES: ClassVar[set[str]] = {\n        \"footer--description\",\n        \"footer--key\",\n        \"footer--highlight\",\n        \"footer--highlight-key\",\n    }\n    \"\"\"\n    | Class | Description |\n    | :- | :- |\n    | `footer--description` | Targets the descriptions of the key bindings. |\n    | `footer--highlight` | Targets the highlighted key binding. |\n    | `footer--highlight-key` | Targets the key portion of the highlighted key binding. |\n    | `footer--key` | Targets the key portions of the key bindings. |\n    \"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Footer {\n        background: $accent;\n        color: $text;\n        dock: bottom;\n        height: 1;\n    }\n    Footer > .footer--highlight {\n        background: $accent-darken-1;\n    }\n\n    Footer > .footer--highlight-key {\n        background: $secondary;\n        text-style: bold;\n    }\n\n    Footer > .footer--key {\n        text-style: bold;\n        background: $accent-darken-2;\n    }\n    \"\"\"\n\n    highlight_key: reactive[str | None] = reactive[Optional[str]](None)\n\n    def __init__(self) -> None:\n        super().__init__()\n        self._key_text: Text | None = None\n        self.auto_links = False\n\n    async def watch_highlight_key(self) -> None:\n        \"\"\"If highlight key changes we need to regenerate the text.\"\"\"\n        self._key_text = None\n        self.refresh()\n\n    def _on_mount(self, _: events.Mount) -> None:\n        self.watch(self.screen, \"focused\", self._bindings_changed)\n        self.watch(self.screen, \"stack_updates\", self._bindings_changed)\n\n    def _bindings_changed(self, _: Widget | None) -> None:\n        self._key_text = None\n        self.refresh()\n\n    def _on_mouse_move(self, event: events.MouseMove) -> None:\n        \"\"\"Store any key we are moving over.\"\"\"\n        self.highlight_key = event.style.meta.get(\"key\")\n\n    def _on_leave(self, _: events.Leave) -> None:\n        \"\"\"Clear any highlight when the mouse leaves the widget\"\"\"\n        if self.screen.is_current:\n            self.highlight_key = None\n\n    def __rich_repr__(self) -> rich.repr.Result:\n        yield from super().__rich_repr__()\n\n    def _make_key_text(self) -> Text:\n        \"\"\"Create text containing all the keys.\"\"\"\n        base_style = self.rich_style\n        text = Text(\n            style=self.rich_style,\n            no_wrap=True,\n            overflow=\"ellipsis\",\n            justify=\"left\",\n            end=\"\",\n        )\n        highlight_style = self.get_component_rich_style(\"footer--highlight\")\n        highlight_key_style = self.get_component_rich_style(\"footer--highlight-key\")\n        key_style = self.get_component_rich_style(\"footer--key\")\n        description_style = self.get_component_rich_style(\"footer--description\")\n\n        bindings = [\n            binding\n            for (_, binding) in self.app.namespace_bindings.values()\n            if binding.show\n        ]\n\n        action_to_bindings = defaultdict(list)\n        for binding in bindings:\n            action_to_bindings[binding.action].append(binding)\n\n        for _, bindings in action_to_bindings.items():\n            binding = bindings[0]\n            if binding.key_display is None:\n                key_display = self.app.get_key_display(binding.key)\n                if key_display is None:\n                    key_display = binding.key.upper()\n            else:\n                key_display = binding.key_display\n            hovered = self.highlight_key == binding.key\n            key_text = Text.assemble(\n                (f\" {key_display} \", highlight_key_style if hovered else key_style),\n                (\n                    f\" {binding.description} \",\n                    highlight_style if hovered else base_style + description_style,\n                ),\n                meta={\n                    \"@click\": f\"app.check_bindings('{binding.key}')\",\n                    \"key\": binding.key,\n                },\n            )\n            text.append_text(key_text)\n        return text\n\n    def notify_style_update(self) -> None:\n        self._key_text = None\n\n    def post_render(self, renderable):\n        return renderable\n\n    def render(self) -> RenderableType:\n        if self._key_text is None:\n            self._key_text = self._make_key_text()\n        return self._key_text\n", "path": "src/textual/widgets/_footer.py"}]}